在JavaScript中添加css樣式(js追加類)代碼示例

更新時間：2024年01月06日 11:52:02 作者：linlinlove2

這篇文章主要給大家介紹了關于在JavaScript中如何添加css樣式,也就是js追加類的相關資料,JavaScript是一種廣泛應用于互聯(lián)網開發(fā)的編程語言,它能夠幫助網頁實現(xiàn)動態(tài)效果和交互性,需要的朋友可以參考下

一、原生js中添加類的方法
二、jquery中添加類的方法
三、檢查是否含有某個類的方法
四、在JavaScript中添加CSS樣式：
五、使用HTML DOM的setAttribute()方法更改CSS屬性：
六、使用JavaScript可以通過動態(tài)創(chuàng)建樣式表 style標簽來添加CSS樣式。
七、修改已有的樣式表
總結

一、原生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可以通過動態(tài)創(chuàng)建樣式表 style標簽來添加CSS樣式。

例如，以下代碼創(chuàng)建一個新的style標簽，并將其添加到HTML文檔中：

這個代碼將所有p元素的文字顏色設為藍色。

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

七、修改已有的樣式表

JavaScript也可以通過修改已有的樣式表來添加CSS樣式。例如，如果您有一個id為“myStyles”的style標簽，您可以使用以下代碼添加一個新的CSS規(guī)則：

這個代碼也將所有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";