使用JavaScript操作HTML元素类

在浏览器中使用HTML元素通常涉及操作它们的类。为了做到这一点，您可能需要一些实用工具，例如检查元素是否有一个类，添加、删除或切换类。

检查HTML元素是否有一个类

要检查HTML元素是否有一个类，您可以使用Element.classList属性和DOMTokenList.contains()方法。

const hasClass = (el, className) => el.classList.contains(className);

hasClass(document.querySelector('p.special'), 'special'); // true

向HTML元素添加类

要向HTML元素添加类，您可以使用Element.classList属性和DOMTokenList.add()方法。

const addClass = (el, className) => el.classList.add(className);

addClass(document.querySelector('p'), 'special');
// 现在段落将具有'special'类

从HTML元素中移除类

类似地，可以使用DOMTokenList.remove()方法来从HTML元素中移除类。

const removeClass = (el, className) => el.classList.remove(className);

removeClass(document.querySelector('p.special'), 'special');
// 段落将不再具有'special'类

切换HTML元素的类

最后，如果您只需要切换类的开和关，可以使用DOMTokenList.toggle()方法。

const toggleClass = (el, className) => el.classList.toggle(className);

toggleClass(document.querySelector('p.special'), 'special');
// 段落将不再具有'special'类