js之给元素添加类的方法 - jessie-xian

原生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");