假设我有 3 个不同的类:一、二和三。每个类有 3 个 div,如下所示:
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
然后我给每个类一个变量:
var _1 = document.getElementsByClassName("one");
var _2 = document.getElementsByClassName("two");
var _3 = document.getElementsByClassName("three);
然后我将它们全部放入一个数组中调用 nums:
var nums = [_1,_2,_3];
如果我想检查并更改类中每个 div 的文本颜色:一、二和三。如果不做这样的事情,我将如何去做:
function textColor() {
var i;
for (i = 0; i < _1.length; i++) {
_1[i].style.color = "red";
}
for (i = 0; i < _2.length; i++) {
_2[i].style.color = "red";
}
for (i = 0; i < _3.length; i++) {
_3[i].style.color = "red";
}
}
我真的希望只有一个 for 循环来遍历并获取数组 nums 中的所有元素,然后遍历并获取 nums 中每个元素的每个 div 并更改文本颜色。
最佳答案
将它们放入 nums
时使用 concat
(并将 NodeList 转换为数组)
var nums = Array.from(_1).concat(Array.from(_2)).concat(Array.from(_3));
或者使用扩展运算符
var nums = [..._1,..._2,..._3];
然后你就可以了
function textColor() {
nums.forEach(node => node.style.color = 'red');
}
关于javascript - 如何使用 javascript 访问数组中的类并设置它们的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47803148/