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"); 
} 

問題は（2 js.js）ColorMeで未定義 のプロパティ「色」を設定することはできませんと言われています。

Answer 1

.styleプロパティは、コレクション内の各要素ではなく、.getElementsByClassName()で見つかった要素のコレクションに対して使用しようとしています。

また、.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>