首页 > 网络编程 > JavaScript > javascript技巧 > JS添加css样式

在JavaScript中添加css样式(js追加类)代码示例

2024-01-06 11:45:38 作者：linlinlove2

这篇文章主要给大家介绍了关于在JavaScript中如何添加css样式,也就是js追加类的相关资料,JavaScript是一种广泛应用于互联网开发的编程语言,它能够帮助网页实现动态效果和交互性,需要的朋友可以参考下

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

总结

到此这篇关于在JavaScript中添加css样式的文章就介绍到这了,更多相关JS添加css样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！