Javascript span元素的宽度

我通过一个字符串创建一些DOM元素，并通过innerHTML将其分配给一个div。 现在我需要一个灵活的span元素宽度（span_homebase）。我的经验是，有时（对我来说，它看起来是随机的），它返回的宽度超出预期。我需要这个跨度元素的宽度，因为在这之后，在同一行中有一个信息按钮，但是跨度的宽度可能不同。所以我使用跨度元素的宽度作为信息按钮的边距。代码如下。我搜索了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";

---

默认情况下，span元素没有维度，因为它的CSSdisplay属性是inline

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

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

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

跨度{
显示：内联块；
}

---

现在您可以使用它的尺寸。

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

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

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

---

这也是我目前发现的。谢谢：）！！现在它每次都能工作。但奇怪的是，有时它是正确的，有时实际上，

内联

元素的维度属性仍然存在，但它们是动态计算的（基于内容和周围的

块

和

内联块

元素）。所以有时候我想他们可能是对的。我加了这个，然后开始工作。但现在，我有时发现有可能返回三个不同的值。怎么可能呢？真的，我不知道为什么。我认为这是固定的，但有时它会返回184或208，但应该是224。有什么想法吗？如果可能，浏览器会尝试使用定义的值，否则它会根据可用的布局估计一个值。如果你需要更多的解释，你应该发布一个运行的例子。我添加了我各自的代码，这足够了吗？

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

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