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

覆蓋和追加

// 覆蓋原來的樣式
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");