如何使用 querySelectorAll 同時將動態樣式套用到多個元素？

使用querySelectorAll 動態地對多個元素進行樣式化

在處理需要同時更改樣式的多個元素時，在確定最有效的方法時會出現困境方法。一種方法 getElementByClassName 為使用者將其應用於多個元素帶來了挑戰。

更合適的解決方案在於使用 querySelectorAll，該方法允許根據指定的類別名稱或選擇器選擇多個元素。若要實作此方法，可以採取以下步驟：

1. 選擇元素： 使用 querySelectorAll 選擇與所需類別名稱相符的所有元素。這可以透過以下行完成：

<code class="javascript">var elems = document.querySelectorAll(className);</code>

2. 循環元素： 使用循環迭代所選元素。這可確保樣式變更單獨套用於每個元素。
3. 套用樣式變更： 在迴圈內，使用元素的樣式屬性套用所需的樣式變更。例如，要將不透明度設為0.5 並提供平滑過渡，可以使用以下行：

<code class="javascript">elems[index].style.transition = "opacity 0.5s linear 0s";
elems[index].style.opacity = 0.5;</code>

透過利用這種方法，可以同時設定多個元素的樣式，從而提供效率和靈活性管理網頁的外觀。

以上是如何使用 querySelectorAll 同時將動態樣式套用到多個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！