hi,欢迎访问本站!
当前位置: 首页Web前端正文

详细介绍一下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元素类名的快捷方法,通过这个属性可以轻松的添加,移除,切换与检查元素的类名,从而实现样式与样式的动态管理。

声明:无特别说明,转载请标明本文来源!
相关推荐