getElementsByClassName 用于动态创建的元素答案

【问题标题】：getElementByClassName for dynamically created elementsgetElementsByClassName 用于动态创建的元素
【发布时间】：2014-03-09 22:09:22
【问题描述】：

我已经使用 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';

但这似乎不起作用。我假设是因为元素是动态添加的。还有其他方法吗？

【问题讨论】：

singleTiles 是一个数组，所以你必须遍历它
我相信它实际上是一个HTMLCollection，即live，这在这个例子中并不重要，但在其他情况下可以。

标签： javascript html class dynamic

【解决方案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';
}

【讨论】：

为什么我不能打电话。在结果数组上加入（）？
@dandavis，我没有尝试过，根据我的理解，这里我们指的是 DOM 元素所以我认为这不会起作用
那么请编辑关于“它返回一个数组”的部分，以免混淆新手。