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

IT技术 javascript
2021-02-28 23:11:57

我正在做一个有 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 代码。

谢谢，伊恩

5个回答

虽然这可以与 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/ - 单击“更改 'em”以查看它的实际效果

所以你的子元素是 div 对吗？如果是这样，请不要将 div 更改为选项。你能发布你的 HTML 是什么样子的吗？你试过我寄的小提琴吗？jsfiddle.net/SxPxN尝试编辑该小提琴以使其接近您的标记并查看您遇到问题的位置。尝试在 JS 函数中放置警报语句，以便您知道正在处理哪些节点 - 例如： alert(nodes[i].nodeName);
2021-04-21 23:11:57
那根本行不通。这是我使用的代码： function changediv(color) { var nodes = document.getElementById('div1').childNodes; for(var i=0; i<nodes.length; i++) { nodes[i].style.background = color; 对不起，如果我在这里真的很笨，我是 Javascript 的新手。
2021-05-02 23:11:57
好的，我会继续尝试
2021-05-02 23:11:57
实际上你需要过滤它 - 请参阅我编辑的解决方案
2021-05-09 23:11:57
这个好一点，但是它只改变了父div的第一个孩子。更改div为option没有任何作用。
2021-05-11 23:11:57

尝试使用以下代码：

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

如果只有一个父元素，那么我们可以querySelector用来选择该元素的所有子元素

HTML

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

JS

let children = document.querySelector(".parent").children;
children.style.color = "red";

如果有更多具有相同类的父元素，那么我们可以使用querySelectorAll和forEach

HTML

<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<div class="parent">
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

JS

let children = document.querySelectorAll(".parent").children;
children.forEach(child => {
  child.style.color = "red";
})
querySelectorAll 不返回数组，所以你需要使用 Array.from(children).forEach(...)
2021-05-11 23:11:57
let children = document.querySelector('.parent')实际上不是选择子 div，而是选择父 div。在你的例子中，孩子们只是从父母那里继承了风格。执行此操作后，打开您的开发工具并检查父项和子项的样式，并查看应用样式的位置。尝试let children = document.querySelector('.parent').children实际选择子元素。
2021-05-13 23:11:57
我明白了，我从下午开始就一直在尝试，但它没有返回数组，谢谢
2021-05-17 23:11:57 
var children = document.getElementById("div").children;

for (let i = 0; i < children.length; i++) {
  children[i].style.visibility = "hidden";
}

我正在创建一个名为 children 的变量，并在其中获取 ID 为“div”的元素，然后使用 .children 选择子代并将其放入数组中。然后我创建 var i 并使用 for 循环遍历并更改它们的所有 CSS 值。程序在遍历每个子元素后停止。

简单，您可以用于每个循环

HTML

<div id="wrapper">
    <div class="el">Element 1</div>
    <div class="el">Element 2</div>
    <div class="el">Element 3</div>
</div

JavaScript

const element =document.getElementById('wrapper');
if(element.hasChildNodes()){
element.childNodes.forEach((e, i)=>{
    console.log(e);
});
}
其它你可能感兴趣的问题
上一篇使用其名称/值从数组中删除项目 下一篇如何使用带有 JSON 结果的 Ajax.BeginForm MVC 助手？