是否可以獲得多個<span>元素的寬度？

所以我有幾個<span>動態生成的元素。問題是我需要一起了解它們的寬度。我試圖用<div>和alert($("#spanWrap").width());來包裝它們，但它給出了容器的寬度而不是<span>元素。是否可以獲得多個<span>元素的寬度？

我想我可以試着給它最好的jsFiddl'n在這裏解釋一下：http://jsfiddle.net/XGynv/7/

來源

2011-07-21 sed

默認情況下，div將展開以獲取其容器的寬度。如果你需要它們縮小到其內容的寬度，一個選項是使它們浮動。 http://jsfiddle.net/M4hWu/2/ – DanC

將display: inline-block;添加到您的div的樣式包裝跨度。

編輯：

與包裹在一個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;

注意，由瀏覽器定義的大小，它現在沒有意義來定義風格的一個固定的寬度。

來源

2011-07-21 19:07:43 Remi

如果您計劃支持IE 7，請小心將內嵌塊應用於div。 – gilly3

IE7中會發生什麼？ – Remi

IE5.5中的內聯塊 - IE7只能應用於內聯元素。所以如果你將內聯塊應用到div，div的顯示仍然是塊。有一個技巧可以使它工作，但不小心使用它可能會弄亂其他瀏覽器：首先將div設置爲內聯塊。然後，在稍後的樣式聲明中，將其設置爲內聯。有了這個技巧，div將在IE7中顯示爲內聯塊，但在新的瀏覽器中內聯。 – gilly3

喜歡的東西

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

？

來源

2011-07-21 19:01:23

除非你編寫自己的代碼來合併每個跨度的寬度，否則你無法做到這一點。

var w = 0; 
$("#divMenuSpan span").each(function(){ 
    w += $(this).width(); 
}); 

//Now w will have the combined width of all the spans inside divMenuSpan

來源

2011-07-21 19:01:45 ShankarSangoli

這是一個明顯的答案，但你可能只是做 -

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

來源

2011-07-21 19:02:07 ipr101

，如果你只是改變了容器的跨度，而不是一個div可能會更容易

<span id="divMenuSpan">

http://jsfiddle.net/XGynv/8/

來源

2011-07-21 19:03:16 rkw

我更新了您的jsFiddle。

基本上我循環遍歷和總結寬度。

來源

2011-07-21 19:05:27 ar3

這是因爲div是塊元素，塊元素始終填充其容器的寬度。爲了讓一個div適合其內容的寬度，浮起來：

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

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

編輯：我應該指出的是，如果你的跨度包裹，浮起的容器div的寬度將縮小使用這種技術。如果你想要跨度的實際寬度，你必須在一個循環中迭代div，並加上它們寬度的總和。

來源

2011-07-21 19:09:16 gilly3

您可以編寫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); 
});

來源

2012-05-10 00:08:34

是否可以獲得多個<span>元素的寬度？

回答

相關問題