原生js给DOM元素添加一个或者多个类的方法总结

先看两个例子：

html:

<div class="test" id="test">
 啦啦啦
</div>

css：

.test{
  width: 100px;
  height: 100px;
  background: #B6BAC4;
}
.test1{
  border: 1px solid;
  width: 200px;
  border-radius: 4px;
}
.test2{
  margin: 0 auto;
}
.test3{
  font-size: 50px;
}

js:

// 覆盖原来的样式
document.getElementById("test").setAttribute("class","test1");
var dom=document.getElementsByClassName("test")[0].setAttribute("class","test1");
// 追加样式不覆盖原来的样式
document.getElementById("test").classList.add("test1");
document.getElementById("test").classList.add("test1","test2","test3");
var dom=document.getElementsByClassName("test")[0].classList.add("test1");
var dom=document.getElementsByClassName("test")[0].classList.add("test1","test2","test3");

效果：

覆盖：

不覆盖：

追加多个样式：

注意所有的都必须要在DOM获取到的前提下用

其次：再用类名获取DOM的时候会报错：

常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

原因：document.getElementsByClassName(...)捕捉到的是该类名元素的数组
正确的访问方式应该是：
document.getElementsByClassName(...)[0].addEventListener...
使用遍历为每个class添加监听：
var classObj = document.getElementsByClassName(...);
for(i=0;i<classObj.length;i++){
classObj[i].addEventListener...
}

所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换

移出一个

dom.classList.remove("className1");

移除多个类:

dom.classList.remove("className1", "className2", "className3", ....., "classNameN");

检查是否含有某个类

dom.classList.contains('className'); //return true or false

 

一个综合应用就是给一组类名相同的DOM追加一个或多个相同的样式

效果：

html:
<ul>
    <li class="test" id="1" >111</li>
    <li class="test" id="2" >111</li>
    <li class="test" id="3" >111</li>
    <li class="test" id="4" >111</li>
</ul>
css:
.test{
  width: 100px;
  height: 100px;
  background: #B6BAC4;
}
.test1{
  border: 1px solid;
  width: 200px;
  border-radius: 4px;
}
.test2{
  margin: 0 auto;
}
.test3{
  font-size: 50px;
}
js:
 var dom=document.getElementsByClassName("test");
for(var i=0;i<dom.length;i++){
    dom[i].classList.add("test1");
}