在JavaScript中添加css样式 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");

三、检查是否含有某个类的方法

div.classList.contains('类名'); //return true or false

四、在JavaScript中添加CSS样式：

document.getElementById("myElement").style.backgroundColor = "red";

五、使用HTML DOM的setAttribute()方法更改CSS属性：

document.getElementById("myElement").setAttribute("style", "background-color: red;");

六、使用JavaScript可以通过动态创建样式表 style标签来添加CSS样式。
例如，以下代码创建一个新的style标签，并将其添加到HTML文档中：
这个代码将所有p元素的文字颜色设为蓝色。

var style = document.createElement("style");
style.innerHTML = "p { color: blue; }";
document.head.appendChild(style);

七、修改已有的样式表
JavaScript也可以通过修改已有的样式表来添加CSS样式。例如，如果您有一个id为“myStyles”的style标签，您可以使用以下代码添加一个新的CSS规则：
这个代码也将所有p元素的文字颜色设为蓝色。

var stylesheet = document.getElementById("myStyles").sheet;
stylesheet.insertRule("p { color: blue; }", 0);

document.getElementById("clda-70a938b0").classList.add("is-open");
document.getElementById("Footer-70a938b0").classList.add("is-open");
document.getElementById("Footer-70a938b0").style.height = "170px";