動態創建元素的getElementByClassName

Question

我用javascript動態創建了一些div：

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

現在我想選擇這些div並改變它們的尺寸，如下所示：

var singleTiles = document.getElementsByClassName('tile');
singleTiles.style.width = '10px';
singleTiles.style.height = '10px';

但這似乎不起作用。 我假設因為元素是動態添加的。 還有另一種方法嗎？

Answer 1

document.getElementsByClassName ，它返回一個包含任何給定類名的所有子元素的數組。 這里的元素是找到的元素的HTMLCollection 。 所以你必須循環它。

采用

var singleTiles = document.getElementsByClassName('tile');
for(var i=0; i<singleTiles.length; i++) { 
    singleTiles[i].style.width = '10px';
    singleTiles[i].style.height = '10px';
}