JavaScript >> Javascript 文檔 >  >> Tags >> CSS

如何使用 JavaScript 切換元素的 CSS 類

toggle() classList的方法 屬性可用於從 HTML 元素切換 CSS 類。該方法將類名作為輸入,並進行切換。

如果該類已經存在於元素的 classList ,它被刪除。否則,它將它添加到 classList .

假設您有以下 HTML 元素:

<div class="pizza">🍕</div>

以下示例演示如何添加更多 olivepizza 通過使用 toggle() 方法:

const div = document.querySelector('div');

div.classList.toggle('olive');

classList 屬性適用於所有現代瀏覽器,以及 IE10 及更高版本。

查看本文以了解有關在 JavaScript 中添加、刪除和切換 CSS 類的更多信息。


Tutorial JavaScript 教程
  1. 7 個 jQuery 全屏幻燈片插件

  2. 在 if 條件語句中分配變量,好習慣與否?

  3. 打字稿中的 Object.freeze / Object.seal

  4. 第 56 天 #100DaysOfCode

  5. 第 9 天:設置 mongoDB

  6. 圖像放大腳本

  7. jQuery克隆表行並為空

  1. 這些是你應該知道的 ES6 特性

  2. 如何在 JavaScript 中迭代對象(視頻)

  3. 如何為包含來自另一個類/文件的全局變量的方法編寫 jasmine 測試?

  4. 黑暗模式還不夠!這裡有一個替代...

  5. Google Slides Api – 檢查 Google 幻燈片 URL 是否私密或無效

  6. 使用 Next.js 構建完整的 API

  7. 後端開發:2021 年終極指南

  1. wp_enqueue_scripts – 如何在 WordPress 中將您的資產排入隊列

  2. 使用 Python 生成 HTML、CSS、JS 項目

  3. 構建簡單的 Node Js API:沒有外部包

  4. 結束?