如何使用「querySelectorAll」修改 JavaScript 中多個元素的樣式？

使用querySelectorAll 修改多個元素的樣式

當需要修改多個元素的樣式時，一種可行的探索方法是使用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中文網其他相關文章！