在JavaScript中添加css样式 js追加类

2023-12-15 12:22| 来源: 网络整理| 查看: 265

一、原生js中添加类的方法

1.为元素添加一个类: document.getElementById("div").classList.add("类名"); 2.为元素添加多个类: document.getElementById("div").classList.add("类名1","类名2","类名3",...); 3.为元素移除一个类: document.getElementById("div").classList.remove("类名"); 4.为元素移除多个类: document.getElementById("div").classList.remove("类名1","类名2","类名3",...);

二、jquery中添加类的方法

1.为元素添加一个类: $("#div").addClass("类名"); 2.为元素添加多个类: //只需要通过空格来间隔 class 值即可一次性添加多个 class $("#div").addClass("类名1 类名2 类名3"); 3.为元素移除一个类: $("#div").removeClass("类名"); 4.为元素移除多个类: //只需要通过空格来间隔 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";

【本文地址】

公司简介

联系我们