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'; 

但是这并未” t似乎工作。我假设因为元素是动态添加的。有没有另一种方法来做到这一点？

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'; 
}