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