Javascript-className与classList的区别

Posted 2021-03-16 lovechun

className添加类名比较僵硬，如在添加按钮点击事件令其添加时，则多次点击则会出现多个类名，而classList则是class正确增改删的应用方法，如：

　　<div id=‘div1‘></div>

　　利用className:

　　　　div1.onclick = funcktion(){

　　　　　　div1.className = ‘c1‘

　　　　}

　　　　多次点击结果：<div id=‘div1‘ class=‘c1c1c1c1c1‘></div>

　　　　注：如果中间有空格（即：div1.className = ‘ c1‘）

　　　　　　则输出结果为<div id=‘div1‘ class=‘ c1 c1 c1 c1 c1‘></div>

　　　　　　显然第一个也有空格；

　　利用classList：

　　　　div1.onclick = funcktion(){

　　　　　　div1.className = ‘c1‘

　　　　}

　　　　多次点击结果：<div id=‘div1‘ class=‘c1‘></div>