getElementsByClassName用于动态创建的元素

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