JavaScript修改元素的class属性值的几种常用方法和示例代码

JavaScript修改元素的class属性值的几种常用方法和示例代码 第一张

JavaScript修改元素的class属性值,是在实现动态网页时非常常用的技术。常用的方法有:className、classList.add、classList.remove、classList.toggle、setAttribute等。下面以className和classList.add为例,来说明如何使用JavaScript修改元素的class属性值。

className

使用className修改元素的class属性值,可以重新设置class属性的值,也可以添加class属性的值,也可以删除class属性的值。

// 重新设置class属性的值
document.getElementById("myDiv").className = "newClass";

// 添加class属性的值
document.getElementById("myDiv").className += " newClass";

// 删除class属性的值
document.getElementById("myDiv").className = document.getElementById("myDiv").className.replace("newClass", "");

classList.add

使用classList.add方法,可以为元素添加class属性的值,但不能删除class属性的值。

// 添加class属性的值
document.getElementById("myDiv").classList.add("newClass");

以上就是使用JavaScript修改元素的class属性值的几种常用方法,可以根据实际需求,选择合适的方法来实现。

© 版权声明
THE END
分享