JavaScript でイベント ホバリングによって同じクラスの複数の要素を動的にスタイル設定する方法

JavaScript を使用して同じクラスで複数の要素のスタイルを設定する方法

HTML と CSS を使用する場合、スタイルを動的に変更する必要がある場合があります。同じクラスを持つ複数の要素。この場合、問題は、getElementsByClassName を使用して、別のページ要素の上にマウスを置いたときに、指定されたクラスを持つすべての要素の背景色を変更することについてです。

この問題は、getElementsByClassName が単一の要素ではなく要素のコレクションを返すために発生します。 。複数の要素のスタイルを設定するには、コレクションをループし、スタイルの変更を各要素に適用する必要があります。

<code class="js">var elements = document.getElementsByClassName('classname');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'red';
}

もう 1 つの問題は、ホバー イベントがターゲット要素に正しくアタッチされていないことです。元のコードでは、onmouseover イベントはトリガー要素 (ホバーされている要素) に付加されます。ターゲット要素のスタイルを変更するには、イベントをターゲット要素自体にアタッチする必要があります。

<code class="html"><th class="classname" onmouseover="changeColor(this)">Hover Here</th></code>

最後に、onmouseover のようなインライン イベント ハンドラーは推奨されないことに注意することが重要です。代わりに、イベント リスナーを使用してイベント ハンドラーを要素にアタッチする必要があります。

<code class="js">function changeColor(element) {
  element.style.backgroundColor = 'red';
}

document.querySelectorAll('.classname').forEach((element) => {
  element.addEventListener('mouseover', () => {
    changeColor(element);
  });
});</code>

これらの手法を使用すると、別のページ要素の上にマウスを移動したときに、同じクラスを持つ複数の要素のスタイルを動的に変更できます。

以上がJavaScript でイベント ホバリングによって同じクラスの複数の要素を動的にスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。