Javascript 无法在JS中设置.color属性

问题是无法设置未定义的属性“color”

---

在ColorMe（js.js:2）上，但我知道它以前多次以相同的方式工作。

问题是，您试图对

.getElementsByCassName（）

找到的元素集合使用

.style

属性，而不是对集合中的每个元素使用

另外（仅供参考），

.getElementsByClassName（）

返回一个“活动”节点列表，这会导致每次访问节点列表变量时重新扫描整个DOM，这会对性能产生很大影响。这方面的用例是有限的，所以您可能更经常地需要一个“静态”节点列表。为此，请使用

.querySelectorAll（）

函数ColorMe（）{
//将所有匹配元素放入JavaScript数组中
var elements=Array.prototype.slice.call（document.queryselectoral（“.grid_元素”）；
//在每个元素上循环。。。。
元素。forEach（函数（el）{
el.style.color=“red”//调整元素的样式
});    
}

点击我
颜色是：
颜色是：
颜色是：

@lesha\u ber我刚刚更新了答案并修复了一个打字错误。这里没有。就我所知，您的答案是正确的，但我很好奇：为什么您要将节点列表转换为数组，而不是在节点列表上使用

array.prototype.forEach.call

？我不认为一种方式比另一种方式更可取；只是好奇。@JosephMarikle您的技术不会将节点列表转换为数组，而且并非所有浏览器都在节点列表上实现

.forEach（）

，或者允许通过

.forEach（）

枚举节点列表，因此您的代码甚至可能在某些客户端中无法运行。即使是这样，使用我的技术，并将结果分配给一个变量，也允许我将结果保留在数组中，只要我愿意，以防我想对结果执行其他数组操作（以后可能会再次循环）。您的技术要求您在每次需要数组操作时连续进行转换。@ScottMarcus您是对的。使用forEach原型不会将其转换为数组，而是将HTMLCollection项保留为其原始类型。感谢您花时间解释这个问题。我认为这可能与未来可能使用数组方法进行的操作有关，但一开始我没有想到这一点。我喜欢看到解决一个问题的多种方法，因为每个决定背后通常都有细微差别的原因。再次感谢！

<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>

<div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-4">
                <div class="grid_element">
                    <div class="title">
                        COLOR IS:
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                <div class="grid_element">
                    <div class="title">
                        COLOR IS:
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                <div class="grid_element">
                    <div class="title">
                        COLOR IS:
                    </div>
                </div>
            </div>
        </div>

function ColorMe() {
    document.getElementsByClassName("grid_element").style.color = ("red");
}