如何在 JavaScript 中动态管理元素类？

如何使用 JavaScript 动态更改元素的类？

用于类操作的现代 HTML5 技术

现代浏览器支持classList 属性，它提供了方便的方法来添加、删除或切换类，而无需外部库：

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');

跨浏览器解决方案

更改所有类

要将所有现有类替换为新类，请使用 className:

document.getElementById("MyElement").className = "MyClass";

添加额外的类

附加空格和新类名称：

document.getElementById("MyElement").className += " MyClass";

删除类

使用正则表达式替换：

document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g , '');

检查如果应用了一个类

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

事件处理

您可以通过以下方式将这些操作分配给 onclick 或其他事件：

• 调用 onClick 属性中的函数：

<button onclick="changeClass()"></button>

• 在中使用addEventListener JavaScript：

document.getElementById("MyElement").addEventListener('click', changeClass);

JavaScript 框架和库

框架和库简化了这些任务，例如 jQuery：

$('#MyElement').addClass('MyClass');
$('#MyElement').click(changeClass);

以上是如何在 JavaScript 中动态管理元素类？的详细内容。更多信息请关注PHP中文网其他相关文章！