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