Javascript 如何使用jQuery获取元素的width属性？

我使用html创建了一个图形，现在我想在最初加载时给它一个好的效果。我想让图中的条从左边飞进去。下面的代码就是这样做的，唯一的问题是每个条都有70%的宽度（显然是因为我在jQuery代码中设置了宽度）。相反，我需要这个数字是唯一的宽度内设置的酒吧（跨度标签）。我想答案大概是这样的：

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

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

但我不能让它工作，请帮忙

守则：

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

div.graph{显示：无；边框：1px纯红色；高度：200px；宽度：400px；边距：0自动；}
div.graph span{显示：无；显示：块；背景：红色；高度：20px；边距底部：10px；}
$（文档）.ready（函数（）{
$（'div.graph'）.fadeIn（'slow'）；
$（'div.graph>span'）。设置动画({
宽度：“70%”
}, 1500 );
});

$（this）.width（）

应该可以工作，否则

$（this.css（'width'）

但是
.css（'width'）
将返回css具有的值，因此可以是“10%”或“auto”
您可以执行以下操作：

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

$(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。设置要运行的动画。设置完毕后，淡入开始
试试这个

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

$（'div.graph'）.fadeIn（'slow'）；
变量条=$（'div.graph>span'）；
对于（var i=0；i请尝试穿上此衣服以获得尺寸：

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

编辑

阅读代码后，如果您不喜欢非JS支持[有很多情况下您不喜欢]，可以使用
.data（）
方法[也非常优雅：）]

HTML:

更新的示例

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


代码

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

示例

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


[更新为%]
您不能使用
$（this）.width（）
？不过，在我的建议中，“this”是窗口，因此是窗口的宽度。@Jon ha，难怪我试着把这些条变成了真正的hugeyeah，但另一个问题是，我不能在动画函数的可接受参数中使用任何一个。创建为变量，改用变量。你真的应该节省$（这个）对于一个变量，或者每次都要进行查找，这只是一个好习惯。看我的答案。实际上最好的方法是$（this）.width（0）.animate（）；因为这里的每个人似乎都在推销自己，所以要获得更优雅的解决方案，您可以查看我的答案；）jQuery有.each（）方法来处理类似的事情。