如何使用jQuery獲取元素的width屬性？

我使用html創建了一個圖形，現在我想在初始加載時給它一個很好的效果。我想讓圖表的條從左邊飛入。下面的代碼這樣做，唯一的問題是每個酒吧結束70％的寬度（顯然，因爲我在jQuery代碼中設置）。相反，我需要該數字對於條形內設置的寬度（span標籤）是唯一的。我想答案應該是這樣的：如何使用jQuery獲取元素的width屬性？

$(this).attr('width')...

，但我無法得到它的工作，請大家幫忙。

驗證碼：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

<style type="text/css"> 

div.graph { display: none; border: 1px solid red; height: 200px; width: 400px; margin: 0 auto; } 

div.graph span { display: none; display: block; background: red; height: 20px; margin-bottom: 10px; } 

</style> 

<script type="text/javascript"> 
$(document).ready(function() { 

    $('div.graph').fadeIn('slow'); 

    $('div.graph > span').animate({ 
     width: "70%" 
    }, 1500); 

}); 
</script> 

<div class="graph"> 
    <span style='width:10%'></span> 
    <span style='width:40%'></span> 
    <span style='width:25%'></span> 
    <span style='width:15%'></span> 
    <span style='width:10%'></span> 
</div><!-- graph -->

來源

2011-04-02 Sherman

難道你們就不能使用'$（本）.WIDTH（）'？不要忘了，在我的建議中，「這個」是窗口，因此窗口的寬度。 – Jon 2011-04-02 00:08:31

@Jon ha，難怪當我試圖讓酒吧有真正的巨大 – Sherman 2011-04-02 00:13:45

試試這個關於大小：

$('div.graph > span').each(function(){ 
    var w=$(this).width(); 
    $(this).width(0); 
    $(this).animate({ 
     width: w 
    }, 1500); 
});

來源

2011-04-02 00:18:54 Khez

啊完美，謝謝。 – Sherman 2011-04-02 00:22:18

你應該真的把$（this）保存到一個變量中，或者每次都必須進行查找，它只是一個goos習慣。看到我的答案。 – Justin808 2011-04-02 00:23:48

實際上，最好的方法是$（this）.width（0）.animate（）; – Khez 2011-04-02 00:26:40

-1

$(this).width()應該工作，否則$(this).css('width');

然而.css('width')將返回的CSS具有價值，所以可能是'10％」，例如或 '自動'

來源

2011-04-02 00:10:32 Lauw

是的，但另一個問題是我不能使用任何在動畫函數的可接受的參數。 – Sherman 2011-04-02 00:11:46

創建爲變量，並使用該變量。 – PHP 2011-04-02 00:19:26

，你可以這樣做：

$(document).ready(function() { 
    $('div.graph > span').each(function() { 
     var $this = $(this); 
     var w = $this.width(); // Grab what it should be 
     $this.width(0); // Reset so it does the animation 
     $this.animate({ 
      width: w 
     }, 1500); 
    }); 
    $('div.graph').fadeIn('slow'); 
});

它讀取您想要的條形圖，然後將其設置回0.設置要去的動畫。它的所有設置後，淡入開始

來源

2011-04-02 00:17:43 Justin808

嘗試......

 $('div.graph').fadeIn('slow'); 

    var bars = $('div.graph > span'); 
    for(var i=0; i<bars.length; i++){ 
     var w = $(bars[i]).width(); 
     $(bars[i]).width(0); 
     $(bars[i]).animate({ 
      width: w 
     }, 1500); 
    }

來源

2011-04-02 00:18:33 Jon

jQuery有。each（）方法用於這樣的事情。 – Justin808 2011-04-02 00:31:25

編輯
閱讀你的代碼後，如果您不關心非JS的支持[當你沒有很多casex的時候]，你可以用.data()的方法[非常優雅:)]

HTML：

<span data-width="10%">Hello</span>

JS：

$('div.graph > span').each(function(){ 
    $(this).animate({ 
     width: $(this).data('width') 
    }, 1500); 
});

更新例如

http://jsfiddle.net/vGUM7/2/

代碼

.animate({ 
    'width': $(element).width() 
},500);

例如

http://jsfiddle.net/vGUM7/1/

[與更新％]

來源

2011-04-02 00:20:00

http://jsfiddle.net/vGUM7/2/是不錯的...榮譽！ – Khez 2011-04-02 00:57:55

如何使用jQuery獲取元素的width屬性？

回答

相關問題