<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>
单击一个按钮应该会将“grid_element”类的所有元素着色为红色,但从未发生过。
function ColorMe() {
document.getElementsByClassName("grid_element").style.color = ("red");
}
问题据说是Cannot set property 'color' of undefined 在 ColorMe (js.js:2),但我知道它以前多次以相同的方式工作。
最佳答案
问题是您正试图在 .getElementsByClassName()
找到的元素集合上使用 .style
属性,而不是在收藏。
此外(仅供引用),.getElementsByClassName()
返回一个“实时”节点列表,这会导致每次访问节点列表变量时重新扫描整个 DOM,这会影响性能相当多。其用例有限,因此您可能更需要一个“静态”节点列表。为此,请使用 .querySelectorAll()
。
function ColorMe() {
// Get all the matching elements into a JavaScript Array
var elements = Array.prototype.slice.call(document.querySelectorAll(".grid_element"));
// Loop over each element....
elements.forEach(function(el){
el.style.color = "red"; // Adjust the element's style
});
}
<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>
关于javascript - 无法在 JS 中设置 .color 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47397415/