是否有可能获得多个<span>元素

Is it possible to get width of multiple <span> elements?

本文关键字：元素 span 有可能 是否      更新时间：2023-09-26

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

我想我可以通过jsFiddl'n来解释它:http://jsfiddle.net/XGynv/7/

将display: inline-block;添加到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;

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

除非您编写自己的代码来像下面这样添加每个span的宽度，否则您无法做到这一点。

var w = 0;
$("#divMenuSpan span").each(function(){
  w += $(this).width();
});
//Now w will have the combined width of all the spans inside divMenuSpan

这是一个显而易见的答案，但你可以直接-

parseInt($("#fashion").width()) + parseInt($("#wedding").width())

如果您将该容器更改为span而不是div，可能会更容易。

<span id="divMenuSpan">
http://jsfiddle.net/XGynv/8/

我更新了你的jsFiddle。

基本上就是循环遍历跨度和宽度之和

这是因为div是一个块元素，而块元素总是填充其容器的宽度。要使div适合其内容的宽度，请使其浮动:

http://jsfiddle.net/XGynv/12/

#wrap
{
    width: 666px;
    overflow: hidden;
}
#divMenuSpan
{
    float: left;
}

Edit:我应该指出，如果您的span换行，浮动容器div的宽度将使用此技术缩小。如果需要span的实际宽度，则必须在循环中迭代div并将其宽度相加。

类似

var size = 0;
$('span.someclass').each(function(el) { size += $(el).width(); });

?

您可以编写javascript代码来计算它

$(document).ready(function() {
    var spans = $("span"),   //span collection
        width = 0; 
    spans.each(function(index,ele){
        width = width + $(ele).outerWidth(true); //here, it will include margin.
    });
    console.log(width);
});​
相关文章：