加載圖標不會變大，因爲我增加了寬度？

這段代碼爲什麼不起作用？我得到所有的圓形元素，然後將每個圓圈增加20個像素，然而它們根本沒有變大。該塊內的Console.log確實起作用，所以我不確定是什麼問題。加載圖標不會變大，因爲我增加了寬度？

var circles = document.getElementsByClassName('circle') 
console.log(circles) 
var width = 1; 
var id = setInterval(frame, 10); 
    function frame() { 
     if (width >= 100) { 
      clearInterval(id); 
      $('#loadscreen').css('display','block') 
      bar.style.display = 'none' 
      $('#circles').css('display','none') 
     } else { 
      width++; 
      bar.style.width = width + '%'; 
      //loop for each circle 
      for(i=0;i<circles.length;i++) { 
      // increment width of circles by 20 pixels on every loop 
      circles[i].style.width += '20px' 
      } 
     } 
    } 
}

來源

2017-09-19 runucegop

，你必須......

circles[i].style.width += '20px'

嘗試

var initial=parseFloat(circles[i].getAttribute("width")) 
circles[i].setAttribute("width",initial+20)

第一線替換得到width屬性，並從字符串轉換爲float它。第二行設置新值，所以舊值加上增量。

這是一個更長的囉嗦，但寬度存儲爲一個字符串，因此需要先將其轉換爲數字，然後才能將其用作數字。

也使用getAttribute和setAttribute是一個更確定的方式來設置和獲取DOM元素的屬性，因爲它不無論身在何處原來的設置已經從例子（CSS或JavaScript）

你給你上面它的聲明之前還調用該函數，所以需要var id = setInterval(frame, 10);被移至底部

來源

2017-09-19 09:48:14 treeseal7

和你使用的eval（）的字符串轉換爲數字...？先看看eval，它是什麼以及它做了什麼。有更好的方法來做到這一點，比如parseInt（）和parseFloat（）。另外，「傻瓜式的方式」並不重要，因爲您使用Javascript來設置DOM的寬度，因爲它不會被CSS以任何方式覆蓋，並且該屬性將被內聯地添加到DOM上無論如何，它優先於CSS值。 – Adriani6

如果在某些情況下使用'elem.style.width'來獲取值將會失敗。但真正使用parseFloat可能是獲取號碼的技術上正確的方式，但在這種情況下兩者都可以正常工作 – treeseal7

沒錯。我的壞事沒有注意到，但是使用eval仍然有效。僅僅因爲它的作用並不意味着它應該是這樣。 eval的執行速度較慢，因爲它將字符串解析爲JavaScript可執行文件，這絕對是不必要的，不應該用於將字符串轉換爲數字，因爲此特定目的您具有parseInt/parseFloat等功能。 – Adriani6

加載圖標不會變大，因爲我增加了寬度？

回答

相關問題