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