如何獲得以百分比表示的css寬度屬性

我正在嘗試使裝入程序類似於YouTube頁面頂部的紅色線條。如何獲得以百分比表示的css寬度屬性

我有一個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]

當第一個函數運行完成，我們有風格attribe，althoght是窗臺一個混亂的方法，解析作風ATTR它的工作。

有什麼建議嗎？

來源

2013-12-08 Prosto Trader

在你的情況我認爲更好的解決方案是類似的東西：

<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（在加載程序的最後一種情況下已滿）。

來源

2013-12-08 13:10:09 damoiser

您可以隨時手動計算的話，看到這個答案如何做到這一點：

您也可以存儲寬度可變的。這是很有道理的我，因爲你已經保持進步的地方，並沒有再從DOM元素取，

var progress=10; 

$(function() 
    { 

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

    });

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

來源

2013-12-08 13:22:25 Brian

我無法開始另一個步驟wile元素正在previousStep上動畫。 –

使用寬度（）方法來獲取整數值，而不是css（'寬度'）

來源

2013-12-08 13:36:28 n1kkou

我nedd %%值 –

你得到的整數值，並將其分成100個部分（到一個變量稱爲增量，讓說），然後你增加10 *增量 – n1kkou

這是可行的，但仍然必須保持在內存容器寬度和加載器的當前寬度。吸收可能會更容易，只是增加裝載機的％寬度 –

如何獲得以百分比表示的css寬度屬性

回答

相關問題