getElementsByClassName を正しく使用し、イベントに基づいて要素スタイルを変更する方法

getElementsByClassName を使用した要素スタイルの変更

getElementsByClassName を使用すると、同じクラス名を持つ複数の要素を選択できます。この例では、コードは、特定のクラス名を持つすべての div の外側でイベントが発生したときに、その div の背景色を変更することを目的としています。

問題診断

提供されたコードにはいくつかの問題があります:

1. getElementsByClassName: の誤った使用法 getElementsByClassName() 構文は、単一の DOM 要素ではなく、一致する要素のコレクションを返します。各要素のスタイルを変更するには、コレクションをループする必要があります。
2. 無効な HTML 構文: 要素の ID にスペースを含めることはできないため、colorswitcher A および colorwitcher B ID が無効になります。 .

解決策

これらの問題を解決するには、次の修正されたコードを使用できます。

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}</code>

この修正されたコードでは、次のようになります。

1. getElementsByClassName によって返されたコレクションをループして、一致するすべての要素のスタイルを変更します。
2. トリガー要素を識別するために、スペースのない正しい ID を使用します。
3. 要素に目的の色の変更を適用するために、changeColor 関数を定義します。

追加メモ

最適なパフォーマンスを得るには、要素のコレクションをキャッシュする代わりに、要素のコレクションをキャッシュすることを検討してください。毎回再クエリします。さらに、CSS クラスとイベント リスナーを使用してスタイルを変更すると、インライン属性を使用するより効率的です。

以上がgetElementsByClassName を正しく使用し、イベントに基づいて要素スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。