如何用javascript选择元素的所有子元素并更改CSS属性？ [英] How to select all children of an element with javascript and change CSS property?

问题描述

我正在开发一个有32个孩子的div的项目。我需要创建一个下拉菜单，它将改变每个div和父级的背景。对于没有孩子的项目的其他部分，我一直在使用以下代码：

I am working on a project that has a div with 32 children. I need to create a dropdown menu that will change the background of each div and the parent. For the other parts of the project that don't have children, I have been using the following code:

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>

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

I could just add a different ID to each child (id1,id2,id3,...), but there are 32 children and not only would I have to add 32 IDs, but also 32 lines of Javascript. There has to be a better way; somehow selecting children or even changing the actual CSS code that selects the children.

谢谢，Ian

推荐答案

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

While this can be done in one line with JQuery, I am assuming you are not using JQuery - in which case, your code will be:

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/ 我创建的一个快速示例 - 点击更改'em以查看它的实际效果

See http://jsfiddle.net/SxPxN/ for a quick example I created - Click on "change 'em" to see it in action

这篇关于如何用javascript选择元素的所有子元素并更改CSS属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！