首頁  >  文章  >  web前端  >  如何在沒有 jQuery 的情況下使用 JavaScript 刪除 CSS 類別?

如何在沒有 jQuery 的情況下使用 JavaScript 刪除 CSS 類別?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-11 17:33:03618瀏覽

How to Remove CSS Classes with JavaScript Without jQuery?

在不使用jQuery 的情況下使用JavaScript 刪除CSS 類別

使用JavaScript 從元素中刪除CSS 類別是Web 開發中的一>

使用JavaScript 從元素中刪除CSS 類別是Web 開發中的一>項常見任務。要在不使用 jQuery 的情況下實現此目的,有多種方法,最簡單的是使用 classList 屬性。

使用 classList

classList 屬性提供了一個簡單的介面用於操作元素上的類別。要刪除特定的類,只需使用remove()方法:
ELEMENT.classList.remove("CLASS_NAME");

示例

考慮以下HTML和CSS:
<div>
.red {
  background: red;
}

要使用classList 從「el」元素中刪除「red」類,可以使用以下程式碼使用:
var el = document.getElementById("el");
el.classList.remove("red");

替代方法

雖然classList是最推薦的方法,但還有其他方法可以刪除類別,例如:
  • 屬性操作:
  • 將className 屬性設定為新類別列表,不帶目標類別。
  • 正規表示式替換:
  • 使用replace()從className字串中刪除目標類別。

但是,這些方法效率較低,並且與使用 classList 相比更靈活。

以上是如何在沒有 jQuery 的情況下使用 JavaScript 刪除 CSS 類別?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn