如何使用純 JavaScript 切換元素類別？-js教程-PHP中文網

如何使用純 JavaScript 切換元素類別？

Linda Hamilton

發布： 2024-10-21 11:20:29

原創

506 人瀏覽過

How to Toggle Element Classes with Pure JavaScript?

使用純 JavaScript 切換元素類別：綜合指南

簡介

在 JavaScript 中，控制元素類別對於動態 Web 開發至關重要。一項常見任務是切換類別以更改元素的外觀或功能。雖然 jQuery 讓這項任務變得簡單，但了解如何使用純 JavaScript 來完成它是至關重要的。

jQuery 解決方案和 JavaScript 等效項

提供的 jQuery 程式碼使用toggleClass() 方法來切換指定元素上的隱藏選單和隱藏電話類別。

JavaScript 等效項：

選項1 (classList.toggle)：

現代>瀏覽器支援classList.toggle() 方法。例如：

<code class="javascript">var menu = document.querySelector('.menu'); // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');</code>

登入後複製

選項2（舊版瀏覽器的classList.js）

舊版瀏覽器可以使用classlist.js 庫實作classList.toggle()。範例：

<code class="javascript">var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');</code>

登入後複製

ID 使用說明

附帶說明，建議避免在 JavaScript 程式碼中使用 ID。 ID 是洩漏到 JavaScript 視窗物件中的全域變量，這可能會導致意外行為和潛在的記憶體洩漏。相反，使用類別來實現更加模組化和封裝的程式碼。

以上是如何使用純 JavaScript 切換元素類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！