イベント発生時に getElementsByClassName を使用して要素をスタイル設定する方法

イベントで getElementsByClassName を使用して要素のスタイルを変更する

特定のクラスの要素は、getElementsByClassName メソッドを使用してイベントの発生時にスタイル設定できます。ただし、このメソッドは要素の配列を返すため、配列を反復処理して、一致するすべての要素にスタイルを適用することが重要です。さらに、onmouseover などのインライン イベント処理属性は廃止されました。

コードのエラー

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

1. getElementsByClassNameメソッドの引数がありません。取得するクラス名を指定する必要があります。
2. 「
3. 同じ ID を持つ複数の要素がページ (「colorswitcher B」) に存在するため、getElementById 呼び出しが曖昧になります。
4. getElementsByClassName 呼び出しはキャッシュされないため、複数のイベントが発生した場合には非効率になる可能性があります。

解決策

1. document.getElementsByClassName('className') を使用して、一致する要素のコレクションを取得します。
2. addEventListener を使用して、イベント ハンドラーをアタッチします。
3. パフォーマンスのために getElementsByClassName の結果をキャッシュします。
4. コードの可読性と保守性を維持するには、インライン スタイル属性の代わりに外部 CSS クラスを使用します。

例

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

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

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

  function changeColor(elements, color) {
    for (var i = 0; i < elements.length; i++) {
      elements[i].classList.add('class-color-' + color);
    }
  }
};</code>

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