jquery - 如何以百分比获取 css 宽度属性

Question

我正在尝试制作加载程序，类似于 youtube 页面顶部的那条红线。

我有一个 div，代表线。

<div class="line" style="border-bottom: 3px solid red"><div>

在加载过程开始时，我将那个 div 的宽度设置为正常宽度的 10%:

$('.line').css('width', 10%);

然后，在每个加载步骤中，我想将宽度增加 10%。

function loadStep () {
   var width = $('.loader').css('width'); //get the current width, suppose it 10%
   var nextWidth = width + 10%; //calc next width
   $('.line').animate({width: "20%"}, 500); //I want to animate it to next width
}

问题是 - 当我获得 var 宽度时，它以像素为单位，而不是百分比。所以我无法添加所需的 10%。

如何以百分比获取元素的实际宽度？我试过这个:

var width = $('.line').attr('style').split(' :')[1]

当第一个函数运行完成并且我们有样式属性时它确实有效，尽管它仍然是一个困惑的方法，解析样式属性。

有什么建议吗？

Answer 1

您始终可以手动计算它，请参阅此答案了解如何操作:

Is it possible to use jQuery to get the width of an element in percent or pixels, based on what the developer specified with CSS?

您还可以将宽度存储在变量中。这对我来说最有意义，因为您已经在某处维护进度并且不必再次从 DOM 元素中获取它:

var progress=10;

$( function()
  {

          $('#add10').click( function()
          {
             progress+=10;
             if (progress>100) progress=100;             
             $('#bar2').css('width', progress + '%' );
          });

  });

http://jsfiddle.net/E2LeG/1/