在JavaScript中添加css样式 js追加类-Toy模板网

这篇具有很好参考价值的文章主要介绍了在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元素的文字颜色设为蓝色。文章来源地址https://www.toymoban.com/news/detail-780680.html

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";