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

簡介

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

jQuery 解決方案和 JavaScript 等效項

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

JavaScript等效項：

• 選項1 (classList.toggle):

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

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

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

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

var classList = require('classlist'); // Import the library
var menu = document.querySelector('.menu');
classList.toggle(menu, 'hidden-phone');

ID 使用說明

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