我正在开发一个包含 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>
我可以为每个孩子添加不同的 ID(id1、id2、id3...),但是有 32 个孩子,我不仅需要添加 32 个 ID,还需要添加 32 行 Javascript。一定有更好的方法;以某种方式选择子项,甚至更改选择子项的实际 CSS 代码。
谢谢,伊恩
虽然这可以使用 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;
}
}
See http://jsfiddle.net/SxPxN/ http://jsfiddle.net/SxPxN/对于我创建的一个简单示例 - 单击“更改它们”以查看其实际效果
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)