javascript - 无法在 JS 中设置 .color 属性

Question

<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)，但我知道它以前多次以相同的方式工作。

Answer 1

问题是您正试图在 .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>