更改元素类 JavaScript

在前端开发中，我们经常需要根据一些条件来更改元素的样式。这种情况下，更改元素类就成为了一种非常简单和有效的方法。

以下是更改元素类的一些常见用法：

添加类

要添加一个类到元素上，可以使用 classList 属性中的 add 方法。

const element = document.getElementById('my-element');
element.classList.add('class-name');

展示效果

添加前：

<div id="my-element"></div>

添加后：

<div id="my-element" class="class-name"></div>

删除类

要删除一个类，可以使用 classList 属性中的 remove 方法。

const element = document.getElementById('my-element');
element.classList.remove('class-name');

展示效果

删除前：

<div id="my-element" class="class-name"></div>

删除后：

<div id="my-element"></div>

切换类

要切换一个类，可以使用 classList 属性中的 toggle 方法。

const element = document.getElementById('my-element');
element.classList.toggle('class-name');

如果元素不包含该类，这样将会添加它。如果元素已经包含该类，那么这个方法将会删除它。

替换类

要替换一个类，可以使用 classList 属性中的 replace 方法。

const element = document.getElementById('my-element');
element.classList.replace('old-class-name', 'new-class-name');

展示效果

替换前：

<div id="my-element" class="old-class-name"></div>

替换后：

<div id="my-element" class="new-class-name"></div>

判断属性是否存在

要检查一个元素是否包含某个类，可以使用 classList 属性中的 contains 方法。

const element = document.getElementById('my-element');
if (element.classList.contains('class-name')) {
    // 包含该类
} else {
    // 不包含该类
}

以上就是更改元素类的常见用法，希望对你有所帮助。如果你有任何问题或疑问，请随时联系我们。