javascript - 如何使用 javascript 选择元素的所有子元素并更改 CSS 属性？

Question

我正在开发一个包含 32 个子元素的 div 项目。我需要创建一个下拉菜单来更改每个 div 和父级的背景。对于项目中没有子项的其他部分，我一直在使用以下代码:

function changediv(color) {
document.getElementById('div1').style.background = color;
}

HTML:

<select>
<option onClick="changediv('#555');">Hex</option>
<option onClick="changediv('blue');">Colorname</option>
<option onClick="changediv('url(example.com/example.png)');">Image</option>
</select>

我可以为每个 child 添加不同的 ID(id1、id2、id3...)，但是有 32 个 child ，我不仅需要添加 32 个 ID，还需要添加 32 行 Javascript。一定有更好的方法;以某种方式选择子项，甚至更改选择子项的实际 CSS 代码。

谢谢，伊恩

Answer 1

虽然这可以使用 JQuery 在一行中完成，但我假设您没有使用 JQuery - 在这种情况下，您的代码将是:

var nodes = document.getElementById('ID_of_parent').childNodes;
for(var i=0; i<nodes.length; i++) {
    if (nodes[i].nodeName.toLowerCase() == 'div') {
         nodes[i].style.background = color;
     }
}

参见http://jsfiddle.net/SxPxN/对于我创建的一个简单示例 - 单击“更改它们”以查看其实际效果