アイコンを読み込んでも、幅を大きくするとアイコンが大きくなりませんか？

Question

このコードが機能しないのはなぜですか？私はすべての円の要素を取得しているし、すべての円を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' 
      } 
     } 
    } 
} 

Answer 1

...

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

は、width属性を取得し、フロートに文字列から、それを変換し

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

最初の行に置き換えてみてください。 2行目で新しい値が設定されるため、古い値にインクリメントが加算されます。

これはもう少し長く続きますが、幅は文字列として格納されるため、数値として使用するには最初に数値に変換する必要があります。例の

元の設定は、（CSSやJavaScript）から来ている場所、それは問題ではありませんとしてもgetAttributeとsetAttributeを使用してDOM要素の属性を設定および取得するために、より確実な方法である

---

上記の関数を宣言する前に関数を呼び出しているので、var id = setInterval(frame, 10);を