js原生classList运用

原生js--classList 操作类名

　　1.classList.add(className)

　　　　添加新的类名

　　2.classList.remove(className)

　　　　删除已存在的类名

　　3.classList.contain(className)

　　　　确定元素是否包含相关的类名，返加值为true or false

　　4.classList.toggle(className)

　　　　如果在对象上没有相应的类名，那么会加上它，若是有相应的类名，则会删除它

　　5.classList.replace(oldclassName,newclassName)

　　　　替换相应的类名

 

//**********html***************//

<div id='demo'/>

//**********js*****************//

var div=document.getElementById('demo')

//1.classList.add()

//<div class='addClassName' id='demo'/>
div.classList.add('addClassName') 

//2.classList.contain()

div.classList.contain('addClassName')// true

//3.classList.remove()

div.classList.remove('addClassName') //删除addClassName

//4.classList.toggle()

div.classList.toogle('toogleClassName')//因为本身没有所以会新增一个新类名

5.classList.replace()

div.classList.replace('toggleClassName','replaceClassName')
//会将toggleClassName替换成replaceClassName