快捷導(dǎo)航

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

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

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

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

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

1.為 <div> 元素添加一個(gè)類:
document.getElementById("div").classList.add("類名");
2.為 <div> 元素添加多個(gè)類:
document.getElementById("div").classList.add("類名1","類名2","類名3",...);
3.為 <div> 元素移除一個(gè)類:
document.getElementById("div").classList.remove("類名");
4.為 <div> 元素移除多個(gè)類:
document.getElementById("div").classList.remove("類名1","類名2","類名3",...);

二、jquery中添加類的方法

1.為 <div> 元素添加一個(gè)類:
$("#div").addClass("類名");
2.為 <div> 元素添加多個(gè)類:
//只需要通過(guò)空格來(lái)間隔 class 值即可一次性添加多個(gè) class
    $("#div").addClass("類名1 類名2 類名3");
3.為 <div> 元素移除一個(gè)類:
$("#div").removeClass("類名");
4.為 <div> 元素移除多個(gè)類:
//只需要通過(guò)空格來(lái)間隔 class 值即可一次性清除掉多個(gè) class
    $("#div").removeClass("類名1 類名2 類名3");

三、檢查是否含有某個(gè)類的方法

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可以通過(guò)動(dòng)態(tài)創(chuàng)建樣式表 style標(biāo)簽來(lái)添加CSS樣式。

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

這個(gè)代碼將所有p元素的文字顏色設(shè)為藍(lán)色。

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

七、修改已有的樣式表

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

這個(gè)代碼也將所有p元素的文字顏色設(shè)為藍(lán)色。

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