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

原生js操作元素类名

• classList.add( newClassName )；
• classList.toggle( className )；
• classList.remove( 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")
  
  

  看到这了，如果有用，动动小手，点个赞再走哦！