`querySelectorAll` を使用して JavaScript の複数の要素のスタイルを変更するにはどうすればよいですか?

querySelectorAll を使用した複数の要素のスタイルの変更

複数の要素のスタイルを変更する必要がある場合、検討すべき 1 つの実行可能な方法は次のとおりです。 JavaScript の querySelectorAll メソッドを使用します。このメソッドを使用すると、クラス名などの指定されたセレクターに基づいて複数の要素を選択できます。

その使用法を説明するために、次のシナリオを考えてみましょう。現在、オブジェクトの不透明度を変更するchangeOpacityという関数があります。トリガーされたときの単一の要素。ただし、この機能を拡張して、不透明度の変更を複数の要素に同時に適用したいと考えています。

querySelectorAll を使用すると、共通のクラス名を共有するすべての要素を選択できます。この選択を取得すると、各要素をループして、必要なスタイルの変更を適用できます。この場合、不透明度とトランジションを調整します。

これは、querySelectorAll を組み込んだchangeOpacity 関数の更新バージョンです:

<code class="js">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;
    }
}</code>

changeOpacity 関数に引数としてクラス名を渡すことで、そのクラス名を持つ複数の要素に不透明度の変更を適用できるようになりました。

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