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]

当第一个函数运行完成并且我们有样式属性时它确实有效，但是它是一个混乱的方法，解析样式attr。

有什么建议吗？

Answer 1

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

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

您可以从“loader_container”中检索像素的宽度（因此它具有响应性），然后为每个步骤添加10％的像素（100% in pixels of the loader_container / 10.0）。

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

当您在每个步骤中增加宽度时，您应该验证该行的宽度是否>加载器容器的宽度，那么行的宽度将等于loader_container（在加载器已满的最后一种情况下）。

Answer 2

您可以随时手动计算，请参阅以下答案：

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/

Answer 3

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

如何以百分比形式获取css width属性

3 个答案: