javascript - 是否可以获取多个 <span> 元素的宽度？

Question

所以我有几个 <span>动态生成的元素。问题是我需要一起知道它们的宽度。我试着用 <div> 包裹它们并制作了alert($("#spanWrap").width());但它给出了容器的宽度而不是 <span>元素。

我想我可以尝试通过 jsFiddl 在这里最好地解释它:http://jsfiddle.net/XGynv/7/

Answer 1

将 display: inline-block; 添加到包裹 span 的 div 样式中。

---

编辑:

将 span 包裹在一个 div 中，如下所示

<div id="spanwrapper">
   <span>span1</span>
   <span>span2</span>
</div>

css 样式应包含(按此顺序，请参阅 gilly3 的评论):

#spanwrapper {
   display: inline-block;     // the div shrinks to fit around the content
}

#spanwrapper {
   *display: inline;          // adding support for IE7 or lower
}

这样你就可以使用 jquery 获得宽度:

$("#spanwrapper").width();

或者使用传统的javascript:

document.getElementById('spanwrapper').clientWidth;

请注意，对于浏览器定义的大小，现在在样式中定义固定宽度没有意义。