原生JavaScript通过dom对类名的操作

JavaScript对类的操作

• 通过 classList

<ul class="ul1"></ul>
 var ul = document.querySelector('ul');
        // 给元素添加类名
        ul.classList.add('ul2');
        console.log(ul.className); //输出'ul1 ul2'
        // 给元素删除类名
        ul.classList.remove('ul1');
        console.log(ul.className); //输出'ul2'
        // 给元素替换类名
        ul.classList.replace('ul2', 'ul1');
        console.log(ul.className); //'ul1'
        // 给元素查看是否包换类 返回布尔型
        ul.classList.contains('ul1');
        console.log(ul.classList.contains('ul1')); //输出true
        //反向操作增删类名
        ul.classList.toggle('ul2');
        console.log(ul.className); //输出'ul1 ul2'

1、给某元素添加类名使用 元素.classList.add('新增类名',....)，参数可以为多个

2、给某元素删除已有类名 元素.classList.remove('删除类名',...)，参数可以为多个

3、替换类名 元素.classList.replace('旧类名'，'新类名')

4、查看某个元素是否包含某个类名 元素.classList.contains('查询的类名')

5、反向操作类名的增减，如果元素有类名就删除，没有就添加 元素.classList.toggle('类名')

• 通过元素的className属性

        <ul class="ul1"></ul>
        console.log(ul.className);//输出'ul1'
        // 给元素添加类名
        ul.className += ' ul2';
        console.log(ul.className); //输出'ul1 ul2'
        // 删除元素类名
        ul.className = '';
        console.log(ul.className); //输出''

1、获取类名 元素.className

2、在获取类名时候就可以进行修改，如增加 元素.className = '类名'；删除类名 元素.className = ''等

• 通过Atrribute对元素类名进行处理

        <ul class="ul1"></ul>
       // 通过setAtrribute设置类名
        ul.setAttribute('class', 'ul2');
        console.log(ul.className); //输出'ul2'
        // 通过getAtrribute获取类名
        console.log(ul.getAttribute('class')); //输出'ul2'

1、设置类名 元素.setAtrribute('class','类名')，直接替换掉原来类名，没有class类就新增

2、获得类名 元素.getAtrribute('class')