外部でスタイル設定された HTML 要素のスタイルを JavaScript で効率的に変更するにはどうすればよいですか?

JavaScript を使用して外部でスタイル設定された HTML 要素のスタイル プロパティを変更する

JavaScript を使用して HTML 要素の外観を動的にカスタマイズする場合、次のことが必要になる場合があります。外部 CSS スタイルシートで最初に定義されたスタイル プロパティを変更します。 document.getElementsByClassName() メソッドを使用してこれを行うことは可能ですが、欠点もあります。

getElementsByClassName() を使用するデメリット

• ライブ ノード リストを返します: getElementsByClassName() はライブ ノード リストを生成しますDOM の変更に基づいてコンテンツを常に更新するため、単一の要素や要素の大きなリストにアクセスする場合は非効率的になる可能性があります。
• 不必要な検索が発生しやすい: 最初の適合元素のみに興味がある場合でも、メソッドは DOM を反復してすべての一致する要素を検索しますが、大部分の要素のみが破棄されます。

より良い代替案: querySelector()

外部でスタイル設定された HTML 要素のスタイル プロパティを効率的かつ確実に変更するには、querySelector( ) メソッドを代わりに使用します。 querySelector() は、DOM をスキャンして、指定されたセレクターに一致する最初の要素を探し、その要素への参照を返します。一致する要素が見つからない場合は、未定義を返します。

変更例

の色を変更するにはクラス「home」を持つ要素をクリックすると緑色にするには、次のコードを使用できます。

const homeElement = document.querySelector(".home");
homeElement.style.color = "green";

このコードは、「home」クラスを持つ最初の要素を安全に取得し、そのカラー スタイル プロパティを直接変更します。ライブノードリストが必要です。

以上が外部でスタイル設定された HTML 要素のスタイルを JavaScript で効率的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。