querySelectorAll を使用して複数の DIV 要素の不透明度を変更する方法

querySelectorAll を使用して複数の要素の外観を変更する

Web 開発の世界では、複数の要素のスタイルを同時に操作する必要があることがよくあります。このシナリオでは、特定の DIV 要素の不透明度を調整するための JavaScript 関数が存在します。ただし、課題は、この関数を複数の DIV に同時に適用することにあります。

getElementsByClassName を使用することは、最初は実行可能なアプローチのように思えますが、この場合は不十分です。代わりに、querySelectorAll がより適切なソリューションとして登場します。この関数の実装方法は次のとおりです。

<code class="javascript">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>

このコードでは、querySelectorAll は特定のクラス名を含むすべての DIV のコレクションを取得します。 for ループはこのコレクションを反復処理し、必要なスタイルの変更を各要素に適用します。

別の提案として、CSS クラスを使用して複数の要素のスタイル値を定義することを検討してください。このアプローチは、スタイル値が動的ではない場合に役立ちます。上記のコードは次のように変更できます。

<code class="javascript">elems[index].classList.add('someclass');</code>

必要な不透明度と遷移値を定義する CSS クラスを追加することで、関数を簡素化できます。

以上がquerySelectorAll を使用して複数の DIV 要素の不透明度を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。