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

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

DDD
DDD原创
2024-12-28 19:49:171025浏览

How to Remove a CSS Class from an Element Using Native JavaScript?

使用原生 JavaScript 从元素中删除 CSS 类

使用 JavaScript 从 HTML 元素中删除 CSS 类无需依赖第三方即可实现 -像 jQuery 这样的派对库。以下是分步说明:

1.识别目标元素:

使用 document.querySelector() 方法选择要从中删除该类的 HTML 元素。指定元素的 ID 或其他唯一标识符。

2.使用 classList 属性:

现代浏览器支持每个元素的 classList 属性。此属性表示应用于该元素的 CSS 类的列表。

3.删除类:

要删除类,只需使用 classList.remove() 方法并将类名作为参数传递即可。例如:

const element = document.querySelector('#element');
element.classList.remove('red');

示例:

以下代码片段演示了如何在实际中从元素中删除“红色”CSS 类场景:

const button = document.querySelector('#remove');
const element = document.querySelector('#el');

button.onclick = () => {
  element.classList.remove('red');
};

HTML:

<div>

CSS:

.red {
  background: red;
}

当“删除类”时单击按钮,“红色”CSS 类将从元素中删除,将其背景颜色更改为默认。

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

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