如何使用 querySelectorAll 更改多個 DIV 元素的不透明度？

使用querySelectorAll修改多個元素的外觀

在Web開發領域，經常需要同時操作多個元素的樣式。在這種情況下，存在一個 JavaScript 函數來調整特定 DIV 元素的不透明度。然而，挑戰在於同時將此函數應用於多個 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中文網其他相關文章！