JavaScript を使用して外部 CSS で定義された要素スタイルを効率的に変更するにはどうすればよいですか?

JavaScript で外部 CSS から要素スタイルにアクセスする

外部 CSS ファイルでスタイルが定義されている HTML 要素を操作する場合、次のことが可能です。 JavaScript を使用してこれらのスタイルを操作します。ただし、望ましい結果を達成するために従うべき特定のガイドラインがあります。

指定された例では、次のコードを使用して

の色を変更します。クリック時にホーム クラスを持つ要素:

function selectHome() {
  console.log("test");
  document.getElementsByClassName("home").style += "background-color:green;";
}

問題:

このコードの問題は、getElementsByClassName() が NodeList (ライブ リスト) を返すことです。すべての一致する要素。このリストの style プロパティに代入すると、すべての要素のスタイルが直接変更されます。特定の要素をターゲットにするには、リスト内の個々の要素にアクセスする必要があります。

解決策:

より良い方法は、querySelector() を使用して、最初に一致する要素を選択してから、そのスタイルを変更します。

function selectHome() {
  const homeElement = document.querySelector(".home");
  if (homeElement) {
    homeElement.style.backgroundColor = "green";
  }
}

または、指定された要素を持つ要素が常に 1 つだけ存在することがわかっている場合は、クラスに直接アクセスするには、getElementByClassName()[0] を使用します。ただし、これは一意のクラスを持つという前提に大きく依存しており、一致する要素が複数ある場合に予期しない動作を引き起こす可能性があるため、一般的には推奨されません。

追加の考慮事項:

• 要素のスタイルを変更するときは、スタイルに追加する代わりに style.property 構文を使用することをお勧めします。 string.
• パフォーマンスの問題や保守性の問題が発生する可能性があるため、ライブ NodeList の使用は可能な限り避けてください。
• 要素の選択には、より正確で正確な情報を提供できるため、querySelector() または querySelectorAll() を使用することを推奨します。効率的な選択メカニズム。

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