Javascript可以通过操作DOM元素来实现对class样式的修改、添加及删除。
修改class样式的方法
要修改DOM元素的class属性，可以使用classList属性，该属性包含了添加、删除和切换class的方法。
const element = document.querySelector(".target-element");
element.classList.remove("old-class"); // 移除旧的样式类
element.classList.add("new-class"); // 添加新的样式类
其中，classList.remove()方法移除DOM元素的原有样式类，而classList.add()方法添加新的样式类。通过这两个方法，可以对DOM元素的类进行修改。
添加class样式的方法
要添加class样式，可以使用classList.add()方法。添加后，DOM元素会同时具有原有的class样式和新添加的class样式。
const element = document.querySelector(".target-element");
element.classList.add("new-class"); // 添加新的样式类
删除class样式的方法
要删除class样式，可以使用classList.remove()方法。
const element = document.querySelector(".target-element");
element.classList.remove("old-class"); // 移除旧的样式类
以上是JS操作class样式的基本方法，根据需要进行组合使用，可以实现复杂的样式修改。
下面的代码示例展示了如何修改、添加和删除class样式。
<!DOCTYPE html>
<html>
<head>
<title>JS操作DOM元素样式</title>
</head>
<body>
<div class="target-element old-class">这是目标元素</div>
<script>
const element = document.querySelector(".target-element");
element.classList.remove("old-class"); // 移除旧的样式类
element.classList.add("new-class"); // 添加新的样式类
</script>
</body>
</html>
在上面的代码中，初始状态下，目标元素具有old-class的样式类。通过JS代码，移除old-class样式类并添加new-class样式类，最终目标元素的样式变为new-class。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现class样式的修改、添加及删除的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 