Jquery 如何获取css宽度属性的百分比

我正在尝试制作加载器，类似于youtube页面顶部的红线

我有一个div，代表直线

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

然后，在每个加载步骤中，我想增加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]

当第一次函数运行完成并且我们有样式attribe时，它确实可以工作，尽管它是一个混乱的方法，解析样式attr

---

有什么建议吗？

在你的情况下，我认为更好的解决方案是：

<div id="loader_container" style="width:100%">
  <div class="line" style="border-bottom: 3px solid red"><div>
</div>

从“

loader\u container

”中检索宽度（以像素为单位）（因此它是响应的），然后为每个步骤添加10%的像素（

100%的loader\u container像素/10.0

）

您甚至可以在彼此之间添加不同的值（例如：第一步：10%，第二步：5%，…），您应该只更改要添加的宽度的计算

---

当您在每个步骤中增加宽度时，您应该验证如果线条的宽度大于装载机容器的宽度，那么线条的宽度将等于装载机容器的宽度（在最后一种情况下，装载机已满）。

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

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

var progress=10;

$( function()
  {

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

  });

---

使用width（）方法获取整数值，而不是css（'width'）

我在启动另一个步骤时遇到问题，因为元素在上一个步骤上被设置了动画。您获取整数值，并将其拆分为100个部分（例如，拆分为一个名为increment的变量），然后你将条增加10*incrementyep这可以工作，但我仍然必须在内存中保留容器宽度和加载程序的当前宽度。吸吮可能更容易，只要增加装载机的宽度%

var progress=10;

$( function()
  {

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

  });