详细介绍一下js中classList属性的作用
墨初 Web前端 511阅读
在JavaScript脚本代码的Element接口中有一个操作HTML元素类名的方法,此方法就是classList属性,此属性可以操作任何的HTML元素。
js classList属性中的一些方法
1、add 方法,向元素中添加一个新的class属性
例:
const divs = document.getElementById('divs_sss'); divs.classList.add('aaa');
2、remove 方法,删除元素中一个指定的class类名
例:
const divs = document.getElementById('divs_sss'); divs.classList.remove('aaa');
3、replace 方法,替换元素中指定的类名
例:
const divs = document.getElementById('divs_sss'); divs.classList.replace('aaa','eee');
4、toggle 方法,切换元素中类名,如果有就删除,没有就添加。
const divs = document.getElementById('divs_sss'); divs.classList.toggle('eee');
5、contains 方法,检查是否存在指定的class
const divs = document.getElementById('divs_sss'); console.log(divs.classList.contains('aaa')); // 这里有一个返值,如果有元素则返回true,否则返回 false
注意:
1、classList 属性,现代的所有浏览器都支付,如果想兼容老的浏览器,可以使用className属性
2、classList 是一个动态的接口,他会自动更新元素的className属性。
总结:classList 属性是js中用于管理html元素类名的快捷方法,通过这个属性可以轻松的添加,移除,切换与检查元素的类名,从而实现样式与样式的动态管理。