元素class的增、删、查、toggle

比如有一个元素div

<div class="btn user">我是div</div>

之前只知道元素有一个className可以来改动元素的类名

但是今天看到了，HTML5，增加了classList属性，更改元素的类名会更简单

先获取到这个div元素

var div=document.querySelector('.btn');

classList有4个方法 add() contains() remove() toggle()

想必大家看到这些方法名就能猜到这些方法是干什么的

add() 增加类名（存在就不再增加了）

contains() 检查这个类名存在不存在存在返回true 不存在返回 false

remove() 删除指定类名

toggle() 类名存在就删除不存在就添加

插入个实例代码

var div=document.querySelector('.btn');

    console.log(div)

    div.classList.add('haah')

    console.log(div.classList.contains('haah'));

    div.classList.remove('haah');

    div.classList.toggle('haah')

    var classs=div.classList;

    console.log(classs)

秒客网

元素class的增、删、查、toggle

相关文章