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

在 JavaScript 中使用 CSS 類隱藏和顯示 DOM 元素

幾天前,我寫了一篇關於如何在 JavaScript 中使用內聯樣式隱藏和顯示 DOM 元素的文章。今天,你將學習在 JavaScript 中使用 CSS 類來隱藏和顯示元素。

讓我們首先聲明一個簡單的 CSS 類,如果應用,通過設置 display: none 隱藏元素 :

.hidden {
    display: none;
}

接下來,假設我們有以下 <button> 元素:

<button class="btn">Click Me</button>

現在如果你想隱藏 來自 DOM 的上述按鈕,只需添加 hidden 使用 add() 類 classList 對象提供的方法,如下所示:

// grab button element
const button = document.querySelector('.btn');

// hide it
button.classList.add('hidden');

顯示 再次元素,只需刪除 hidden 使用 classList.remove() 類 方法:

button.classList.remove('hidden');

雖然內聯樣式可以完美地切換元素的可見性,但 CSS 類可以讓您更靈活地控制此類行為。

創建 hide() &Show() 方法

classList object 提供了一堆方法來在 vanilla JavaScript 中的元素中添加、刪除和切換 CSS 類。

讓我們使用 classList 創建我們自己的類似 jQuery 的 hide() , show() , 和 toggle() 純 JavaScript 中的方法:

// hide an element
const hide = (elem) => {
    elem.classList.add('hidden');
}

// show an element
const show = (elem) => {
    elem.classList.remove('hidden');
}

// toggle the element visibility
const toggle = (elem) => {
    elem.classList.toggle('hidden');
}

現在,如果你想隱藏或顯示任何 DOM 元素,只需調用上面的方法:

// hide
hide(document.querySelector('.btn'));

// show
show(document.querySelector('.btn'));

// toggle
toggle(document.querySelector('.btn'));

查看本指南以了解有關在 vanilla JavaScript 中處理 CSS 類的更多信息。


Tutorial JavaScript 教程
  1. 使用 .env 文件在 React 應用程序中存儲 API 密鑰時要記住的 5 件事

  2. 你可能錯過的 ES2021 新特性

  3. 回調中未定義函數參數

  4. 我用 Electron 開發了一個高度可定制的儀表板工具

  5. ⚡ 使用 github 操作輕鬆將 react 應用程序部署到 github 頁面

  6. 單體與微服務架構 - CSH 100 天 #3

  7. 反應電子樣板

  1. 如何使用 Vue 模板引用訪問 HTML 元素

  2. Promise.all 用於拒絕和解決

  3. 使用 React 過渡組改進你的 UI

  4. 從頭開始構建創意生成器,第 1 部分:使用 Github 和 dotenv 進行項目設置 [視頻]

  5. 向引導下拉菜單添加幻燈片效果

  6. 使用 Vue.js 從頭開始構建應用程序

  7. 使用 JavaScript 評估逆波蘭表示法表達式 |算法

  1. 創建 Vue.js 無服務器結帳表單:應用程序和結帳組件

  2. Codebytes:提供/注入是 vue3 中的幸福

  3. 做你的第一個 AWS Lambda 無服務器 Node.js API

  4. 我在 NodeJS Berlin(德國 🇩🇪)談論了 🗣🎙 關於 create-awesome-package