JavaScript中span元素的宽度

Question

我通过字符串创建了一些DOM元素，并将其通过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;
}

- Moritz Pfeiffer

Answer 1

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

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

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

- Wojtek Majerski

Answer 2

默认情况下，span元素没有尺寸，因为它的CSS display属性是inline。

如果您想要给它一个宽度，您应该将该属性更改为inline-block。

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

现在您可以玩转它的尺寸。

- Supersharp

---

这就是我目前发现的。谢谢 :)!! 现在它每次都能正常工作了。但有时正确，有时不正确，这很奇怪。 - Moritz Pfeiffer

实际上，对于 inline 元素，其尺寸属性仍然存在，但是它们是动态计算的（基于内容以及周围的 block 和 inline-block 元素）。因此，我猜有时候它们可能是正确的。 - Supersharp

我添加了这个并且它起作用了。但是现在有时候我发现可能会返回三个不同的值。这怎么可能呢？真的，我不知道为什么。我以为这已经被修复了，但有时它会返回184或208，但应该是224。你有什么想法吗？ - Moritz Pfeiffer

浏览器会尝试使用定义的值，如果不可能，则根据可用布局估算一个值。如果需要更多解释，您应该发布一个运行示例。 - Supersharp

我添加了我的相应代码，这样就足够了吗？ - Moritz Pfeiffer