Javascript 是否有可能获得多重宽度<；span>；元素？

因此，我有两个动态生成的

元素。问题是我需要知道它们的宽度。我试图用

包装它们，并发出

警报（$（“#spanWrap”）.width（）

元素

我想我可以在这里用jsFiddl'n it来最好地解释它：

类似于

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

---

？

除非您编写自己的代码来累加每个跨度的宽度，否则您无法做到这一点，如下所示

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">

我更新了您的

---

基本上，我是在跨距中循环并求和宽度。

添加

显示：内联块到环绕跨距的div的样式


编辑：

将跨距包裹在div中，如中所示

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

因此，您可以使用jquery获得宽度：

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

或者使用传统的javascript：

document.getElementById('spanwrapper').clientWidth;

请注意，对于浏览器定义的大小，现在在样式中定义固定宽度没有意义。
这是因为div是块元素，块元素始终填充其容器的宽度。要使div适合其内容的宽度，请将其浮动：


Edit:我应该指出，如果span换行，浮动容器div的宽度将使用此技术收缩。如果您想要跨距的实际宽度，您必须在循环中迭代div并将其宽度之和相加。
您可以编写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);
});​

默认情况下，div将展开以获取其容器的宽度。如果您需要它们收缩到其内容的宽度，一个选项是使它们浮动。如果您计划支持IE5.5中的IE7.inline-block，请小心将inline-block应用于div-IE7只能应用于inline元素。因此，如果将内联块应用于div，该div的显示将保持为块。有一个技巧可以让它工作，但如果不小心使用它，可能会弄乱其他浏览器：首先将div设置为inline block。然后，在后面的样式声明中，将其设置为inline。使用此技巧，div将在IE7中显示为内联块，但在较新的浏览器中显示为内联块。因此，在上面的编辑中，在内联块下方添加display:inline使解决方案通常有效？否。您必须将
display:inline在单独的声明块中。例如，
#x{display:inline block；}#x{display:inline；}
。然后，您必须将第二个声明放在仅IE代码中，例如通过使用条件注释，否则其他浏览器都将是
inline
，而不是
inline block
；我检查了条件语句是否可以用于css块中的一行，因此同一块中的“[if lte IE 7]”也应该执行此任务。
#wrap
{
    width: 666px;
    overflow: hidden;
}
#divMenuSpan
{
    float: left;
}

$(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);
});​