首頁 > web前端 > css教學 > 如何使用本機 JavaScript 從元素中刪除 CSS 類別?

如何使用本機 JavaScript 從元素中刪除 CSS 類別?

DDD
發布: 2024-12-28 19:49:17
原創
1004 人瀏覽過

How to Remove a CSS Class from an Element Using Native JavaScript?

使用原生JavaScript 從元素中刪除CSS 類別

使用JavaScript 從HTML 元素中刪除CSS 類別無需依賴第三方即可實現-像jQuery 這樣的派對庫。以下是逐步說明:

1.識別目標元素:

使用 document.querySelector() 方法選擇要從中刪除該類別的 HTML 元素。指定元素的 ID 或其他唯一識別碼。

2.使用 classList 屬性:

現代瀏覽器支援每個元素的 classList 屬性。此屬性表示套用於該元素的 CSS 類別的清單。

3.刪除類別:

要刪除類,只需使用 classList.remove() 方法並將類別名稱作為參數傳遞即可。例如:

const element = document.querySelector('#element');
element.classList.remove('red');
登入後複製

範例:

以下程式碼片段示範如何在實際中從元素中刪除「紅色」CSS類別場景:

const button = document.querySelector('#remove');
const element = document.querySelector('#el');

button.onclick = () => {
  element.classList.remove('red');
};
登入後複製

HTML:

<div>
登入後複製

CSS:

.red {
  background: red;
}
登入後複製

CSS:

「刪除類」時點選按鈕,「紅色」CSS 類別將從元素中刪除,將其背景顏色變更為預設。

以上是如何使用本機 JavaScript 從元素中刪除 CSS 類別?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板