首页 >web前端 >css教程 >如何使用纯 JavaScript 从元素中删除 CSS 类?

如何使用纯 JavaScript 从元素中删除 CSS 类?

Susan Sarandon
Susan Sarandon原创
2024-12-21 07:05:09622浏览

How Can I Remove CSS Classes from Elements Using Pure JavaScript?

使用纯 JavaScript 从元素中删除 CSS 类

在 Web 开发领域,从元素中删除 CSS 类而不求助于jQuery 经常出现。此任务需要彻底了解 JavaScript 的功能。

现代方法:ClassList 来救援

为了以符合当前 Web 标准的方式实现此目标, classList 属性作为首选方法脱颖而出。大多数主流浏览器都支持此属性,它提供了操作类的直接方法。

操作中的实现

为了说明 classList 的用法,请考虑以下代码代码片段:

ELEMENT.classList.remove("CLASS_NAME");

这是一个提供进一步说明的示例清晰度:

<div>
function remove() {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

remove.onclick = () => {
  remove();
};

在此代码中,remove() 函数利用 classList.remove() 从 ID 为 el 的元素中消除“红色”类。单击 ID 为“remove”的按钮后,会触发此操作,从而删除相应的 CSS 样式。

以上是如何使用纯 JavaScript 从元素中删除 CSS 类?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn