Question

我通过String创建一些DOM-Elements并通过innerHTML将它分配给div。现在我需要一个灵活的span元素宽度（span_homebase）。我所经历的是，有时（对我而言，它看起来是随机的）它会返回除预期之外的其他宽度。我需要这个span元素的宽度，因为在同一行之后有一个信息按钮，但是span的宽度可能不同。所以我使用span元素的宽度作为信息按钮的边距。代码如下。我搜索了innerHTML的异步处理程序，但在另一篇文章中有人说它不是必需的，因为它是立即分配的。有什么想法尝试吗？因为信息现在有时在正确的地方，有时不在。

string = string + "<span id ='span_homebase'>" + homebaseCity + "</span>";
string = string + "<div class='section-end'></div>";
element.innerHTML = string;
var marginInfoHomebase = document.getElementById('span_homebase').offsetWidth + 20;
document.getElementById("information_button_homebase").style.margin = "5px 0 0 " + marginInfoHomebase + "px";

现在，如果我为我打开相应的网站，有时marginInfoHomebase有时会返回108，有时会返回183，即使为span元素分配了相同的值。很奇怪。有什么想法吗？

编辑：工作实例：

function createHomeSettingsView(settingsA){
    var element = document.getElementById("table-settings");
    var string = "";
    for(var i = 0; i < settingsA.length; i++){
        for(var z = 0; z < settingsA[i].length; z++){
            if(i == 1){
                //Notification buttons
                if(z == 1){
                    //homebase setting
                    if(window.localStorage.getItem("switch_homebase") == 1){
                        //homebase on
                        var homebaseCity = settingsA[i][z] + ": " + window.localStorage.getItem("homebase_loc");
                        string = string + " \
                        <div class='row' style='height:100px;' id='settings-sec-"+ i +"-row-" + z +"'> \
                            <div class='text'> \
                                <span id='span_homebase'>" + homebaseCity + "</span> \
                            </div> \
                            <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
                            <div id='handleAutoSwitcherHomebase'></div>\
                            <div id='showRadiusRangeHomebase'>Radius: 30km</div>\
                            <input class='sliders' id='changeRadiusRangeHomebase' type='range' min='5' max='100' step='5' oninput='handleChangeHomebase(this.value)' onchange='handleInputHomebase(this.value)' >\
                        </div>";
                    }
                    else{
                        //homebase off
                        string = string + " \
                        <div class='row' id='settings-sec-"+ i +"-row-" + z +"'> \
                            <div class='text'>\
                                <span id='span_homebase'>" + settingsA[i][z] + "</span> \
                            </div> \
                            <div onClick='homebaseInfoClick();' class='information_button' id='information_button_homebase'></div>\
                            <div id='handleAutoSwitcherHomebase'></div>\
                        </div>";
                    }
                }
            }           
        }
    }
    element.innerHTML = string;
    var marginInfoHomebase = document.getElementById("span_homebase").offsetWidth + 25;
    var marginText = "5px 0 0 " + marginInfoHomebase + "px";
    console.log("Span: " + marginInfoHomebase);
    document.getElementById("information_button_homebase").style.margin = marginText;
}

CSS：

.container .table-settings{
    top: 64px;
    position: absolute;
    padding:0;
    left: 0;
    right: 0;
    bottom:0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #ECEBF3;
}

.container .table-settings .row{
    background-color: white;
    padding-top: 14px;
    height:50px;
    border-bottom: 1px solid LightGray;
}

.container .table-settings .row .text{
    margin-left: 15px;
    color: black;
    float: left;
}

#span_homebase{
    display: inline-block;
}

Answer 1

要获取内联元素的宽度，请使用getBoundingClientRect方法：

var mySpan = document.getElementById("mySpan");

var spanWidth = mySpan.getBoundingClientRect().width;
var spanHeight = mySpan.getBoundingClientRect().height;

Answer 2

默认情况下， span 元素没有维度，因为其CSS 显示属性为内嵌。

如果要为其指定宽度，则应将该属性更改为内联块。

<style>
span {
    display: inline-block ;
}
</style>

现在你可以玩它的尺寸了。

跨度元素的Javascript宽度

2 个答案: