js之給元素添加類的方法

原生js中添加類的方法

//1.為 <div> 元素添加一個類:
document.getElementById("div").classList.add("類名");

//2.為 <div> 元素添加多個類:
document.getElementById("div").classList.add("類名1","類名2","類名3",...);

//3.為 <div> 元素移除一個類:
document.getElementById("div").classList.remove("類名");

//4.為 <div> 元素移除多個類:
document.getElementById("div").classList.remove("類名1","類名2","類名3",...);

.jquery中添加類的方法

//1.為 <div> 元素添加一個類:
$("#div").addClass("類名");

//2.為 <div> 元素添加多個類:
//只需要通過空格來間隔 class 值即可一次性添加多個 class
 $("#div").addClass("類名1 類名2 類名3");

//3.為 <div> 元素移除一個類:
$("#div").removeClass("類名");

//4.為 <div> 元素移除多個類:
//只需要通過空格來間隔 class 值即可一次性清除掉多個 class
 $("#div").removeClass("類名1 類名2 類名3");

檢查是否含有某個類的方法

//檢查是否含有某個CSS類
div.classList.contains('類名'); //return true or false

例子：
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");