querySelectorAll を使用して複数の要素のスタイル プロパティを効率的に変更し、外部スタイルシートとの潜在的な競合を回避するにはどうすればよいでしょうか?

querySelectorAll を使用して複数の要素のスタイル プロパティを変更する

Web 開発の領域では、スタイルを変更する必要がある状況がよく発生します。複数の要素のプロパティを同時に実行します。 getElementById などの手法は単一要素の操作には有効であることが証明されていますが、複数の要素をターゲットにして変更するためのより効率的なアプローチは、querySelectorAll メソッドを使用することです。

理解querySelectorAll メソッド

querySelectorAll メソッドは、CSS セレクターの機能を利用して、指定されたクエリに一致する要素の NodeList を特定して返します。 getElementsByClassName や他の同様のメソッドとは異なり、querySelectorAll は幅広いセレクターへのアクセスを提供し、属性、ID、クラス、およびその他のさまざまな基準に基づいて要素をターゲットにすることができます。

実装

元の質問で提供された関数をもう一度見てみましょう。この関数は、ID によって特定の要素をターゲットにして不透明度を調整します。

function changeOpacity(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "opacity 0.5s linear 0s";
  elem.style.opacity = 0.5;
}

これを拡張するには関数を使用して複数の要素に同じスタイルを適用すると、質問で提案されているように、querySelectorAll を利用して共通のクラス名に基づいて要素を選択できます。変更された実装は次のとおりです。

function changeOpacity(className) {
  var elems = document.querySelectorAll(className);
  var index = 0, length = elems.length;
  for ( ; index < length; index++) {
    elems[index].style.transition = "opacity 0.5s linear 0s";
    elems[index].style.opacity = 0.5;
  }
}

追加の考慮事項

提供された関数は、選択された要素のインライン スタイルを直接変更することに注意することが重要です。このアプローチはシンプルですが、外部スタイル シートや他の場所で定義されたインライン スタイルと競合する可能性があります。

不透明度の変更が静的で非動的である場合、より最適な解決策には、 classList.add メソッドを使用して、目的のスタイルをターゲット要素に動的に追加します。

function changeOpacity(className) {
  var elems = document.querySelectorAll(className);
  var index = 0, length = elems.length;
  for ( ; index < length; index++) {
    elems[index].classList.add('someclass');
  }
}

このアプローチにより、スタイルの変更が CSS クラス内にカプセル化され、管理が容易になり、柔軟性。

以上がquerySelectorAll を使用して複数の要素のスタイル プロパティを効率的に変更し、外部スタイルシートとの潜在的な競合を回避するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。