如何使用 JavaScript 高效率修改外部樣式 HTML 元素的樣式？

使用JavaScript 修改外部樣式HTML 元素的樣式屬性

使用JavaScript 動態自訂HTML 元素的外觀時，可能需要修改原本在外部CSS 樣式表中定義的樣式屬性。雖然可以使用 document.getElementsByClassName() 方法來實現此目的，但它也有缺點。

使用getElementsByClassName() 的缺點

• 傳回活動節點清單： getElementsByClassName() 產生活動節點更新其內容，這對於存取單一元素或大型元素清單可能效率低下。
• 容易進行不必要的搜尋：即使只對第一個匹配元素感興趣，該方法會遍歷整個 DOM 來查找所有匹配元素，但會丟棄其中的大部分。

更好的替代方案： querySelector()

為了有效率、可靠地修改外部樣式HTML 元素的樣式屬性，建議使用querySelector() 方法。 querySelector() 掃描 DOM 以尋找與指定選擇器相符的第一個元素，並傳回對該元素的參考。如果沒有找到符合的元素，則傳回未定義。

修改範例

更改

的顏色具有「home」類別的元素在點擊時變為綠色，可以使用以下程式碼：

const homeElement = document.querySelector(".home");
homeElement.style.color = "green";

此程式碼安全地檢索具有「home」類別的第一個元素，並直接修改其顏色樣式屬性，而無需需要一個活動節點清單。

以上是如何使用 JavaScript 高效率修改外部樣式 HTML 元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！