原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()

悠悠 2022-11-22 02:49 242阅读 0赞

### 原生js操作元素类名 ###

*  [classList.add( newClassName )；][classList.add_ newClassName]
 *  [classList.toggle( className )；][classList.toggle_ className]
 *  [classList.remove( oldClassName )；][classList.remove_ oldClassName]
 *  [classList.contains( oldClassName );][classList.contains_ oldClassName]

### classList.add( newClassName )； ###

添加新的类名，如已经存在，取消添加

### classList.contains( oldClassName ); ###

确定元素中是否包含指定的类名，返回值为true 、false；

### classList.remove( oldClassName )； ###

移除已经存在的类名;

### classList.toggle( className )； ###

如果classList中存在给定的值，删除它，否则，添加它；

*  classList.replace( oldClassName，newClassName )；  
    类名替换
    
        let div = document.createElement('div')
        div.id = 'test'
        let test = document.querySelector('#test')
        
        //添加类：select
        test.classList.add("select")
        	
        //删除类：select
        test.classList.remove("select")
        	
        //确定是否包含给定的类：select
        test.classList.contains("select");
        
        //切换类：select，存在删除，不存在，就添加;
        test.classList.toggle("select")
        
        //替换类：新类newSelect替换老类select
        div.classList.replace("select","newSelect")
    
    看到这了，如果有用，动动小手，点个赞再走哦！

[classList.add_ newClassName]: https://blog.csdn.net/weixin_42752574/article/details/103378054#classListadd_newClassName__2
[classList.toggle_ className]: https://blog.csdn.net/weixin_42752574/article/details/103378054#classListtoggle_className__11
[classList.remove_ oldClassName]: https://blog.csdn.net/weixin_42752574/article/details/103378054#classListremove_oldClassName__8
[classList.contains_ oldClassName]: https://blog.csdn.net/weixin_42752574/article/details/103378054#classListcontains_oldClassName__5