一、介绍
Class是为HTML和XML元素提供一种分门别类的方式，可以方便地对相同的元素应用相同的CSS样式或JavaScript函数。
在JavaScript中，我们可以使用classList属性来修改元素的class。classList是一个对象，它提供了add、remove、toggle等方法，可以使用这些方法来添加、删除、切换class。
二、为元素添加class
使用classList属性的add方法，可以为元素添加class。
element.classList.add("class1");
上述代码中，element是我们需要修改class的元素，”class1″是新添加的class。
可以同时添加多个class，中间用逗号隔开：
element.classList.add("class1", "class2", "class3");
三、删除元素的class
使用classList属性的remove方法，可以删除元素的class。
element.classList.remove("class1");
上述代码中，element是我们需要修改class的元素，”class1″是需要删除的class。
可以同时删除多个class，中间用逗号隔开：
element.classList.remove("class1", "class2", "class3");
四、切换元素的class
使用classList属性的toggle方法，可以切换元素的class。如果元素拥有该class，toggle方法会将它移除；如果元素没有该class，toggle方法会将它添加。
element.classList.toggle("class1");
上述代码中，element是我们需要修改class的元素，”class1″是需要切换的class。
可以使用第二个参数来控制是否强制添加或移除class：
element.classList.toggle("class1", true); //强制添加class1
element.classList.toggle("class1", false); //强制移除class1
五、替换元素的class
使用classList属性的replace方法，可以替换元素的class。
element.classList.replace("oldClass", "newClass");
上述代码中，element是我们需要修改class的元素，”oldClass”是需要被替换的class，”newClass”是新的class。
六、判断元素是否含有某个class
使用classList属性的contains方法，可以判断元素是否含有某个class。
element.classList.contains("class1");
上述代码中，element是需要被判断的元素，”class1″是需要判断的class。如果元素包含该class，返回true；否则返回false。
七、总结
通过classList属性提供的add、remove、toggle、replace、contains等方法，我们可以方便地修改元素的class。在实际开发中，优雅的使用class可以减少代码冗余，提高开发效率。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/259188.html
微信扫一扫 
支付宝扫一扫 