如何使用 JavaScript 在 HTML 元素中新增或刪除類別？

使用 JavaScript 將類別加入元素

使用 HTML 元素時，通常需要使用 JavaScript 動態新增或刪除類別。例如，假設您有一個具有以下 HTML 的元素：

<div class="someclass">
    <img ...>

並且您想要建立一個 JavaScript 函數，將另一個類別新增到上面的 div 元素。

現代瀏覽器

如果您僅針對支援 Element.classList 屬性的現代瀏覽器，解決方案很簡單。只要使用classList.add() 方法將新類別新增至元素：

element.classList.add("my-class");

要刪除類別，請使用classList.remove() 方法：

element.classList.remove("my-class");

Internet Explorer 9 及更低版本

對於Internet Explorer 9或更低版本等舊版瀏覽器，不支援除了 classList 屬性之外，還可以使用 className 屬性。首先，為元素分配ID，以便於檢索：

<div>

然後，將新類別名稱與現有類別名稱連接起來，確保它們之間添加一個空格：

var d = document.getElementById("div1");
d.className += " otherclass";

記得在新類別名稱前面加上空格，以避免與類別清單中現有的類別衝突。

透過遵循這些方法，您可以動態添加或使用 JavaScript 從任何 HTML 元素中刪除類，從而提供對網頁樣式的靈活性和控制。

以上是如何使用 JavaScript 在 HTML 元素中新增或刪除類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！