本文目錄一覽：
如何用JS給div添加樣式
用JS給div添加樣式是通過js操作css來實現的。
用js方法找到div的dom對象
通過js操作css的style屬性來改變div的樣式
具體舉例如下：
定義div:div id=”myDiv” style=”color:red”改變樣式測試/div
編寫js代碼：
var color = document.getElementById(“myDiv”).style.color;
if (color == “red”)
document.getElementById(“myDiv”).style.color=”black”;
else
document.getElementById(“myDiv”).style.color=”red”;
執行js代碼後，div原來是紅色會變成黑色，原來是別的顏色會變成紅色
JS創建的style樣式怎麼使用變量
可以使用字符串拼接的方式，用setAttribute方法，將原有屬性（如果有的話），與想要設置的屬性變量拼接到一起。
節點.setAttribute(“style”,原有屬性+屬性名變量+”:”+ 屬性值+”;”);
JS里添加樣式
JS里添加樣式的方法：
1、首先，要創建標籤，使用document.createElement函數，如圖創建div標籤。使用其className設置class，id設置id，style設置樣式。
2、樣式的設置也可以分項進行。如圖是分項設置其left，top，display，position，width幾個樣式。
3、通過設置標籤的innerHTML屬性可以直接給其添加子標籤以及子標籤的樣式。當然，也可以分項分層添加標籤。
4、設置好標籤（如圖是div標籤，變量名box），使用document.body.appendChild添加標籤到body當中。
5、標籤添加以後，依然可以修改樣式，如圖是使用document.getElementById方法根據id獲取標籤，修改style。
6、標籤添加以後，也可以給其添加和刪除event處理。如圖是使用jQuery給id為img-preview-box的標籤添加hover鼠標經過的處理。
用JavaScript動態建立或增加CSS樣式表的實現方法
1、簡單的方法，不管不顧，直接這樣就可以：
document.createStyleSheet().cssText
=
‘標籤{color:red;’
+
//
這個注釋只在當前JS中幫助理解，並不會寫入CSS中
‘width:300px;height:150px}’
+
‘.類名{……}’
+
‘#ID們{……}’
;
//完活。我喜歡分號這樣寫，和指令書寫的起始位置對齊比較好一點，尤其是後面有其它語句的時候。
2、完善一點的方法，防止重複添加，可以通過添加樣式表ID並對其判斷來實現：
if
(!document.styleSheets[‘要建立的樣式表ID如theforever’])
{
//先檢查要建立的樣式表ID是否存在，防止重複添加
var
ss
=
document.createStyleSheet();
ss.owningElement.id
=
‘要建立的樣式表ID如theforever’;
ss.cssText
=
‘標籤{display:inline-block;overflow:hidden;’
+
//
這個注釋只在當前JS中幫助理解，並不會寫入CSS中
‘text-align:left;width:300px;height:150px}’
+
‘.類名{……}’
+
‘#ID們{……}’
;
}
以上這篇用JavaScript動態建立或增加CSS樣式表的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
JS動態添加樣式！
看看這個代碼是不是你要的
script
type=”text/javascript”
function
colors(color){
var
str=color.innerHTML;
var
kk=str.replace(/變色/,
“span
style=’color:#FF0000;’變色/span”);
color.innerHTML=kk;
}
/script
div
id=”test”
測試文字變色
/div
a
href=”javascript:colors(test)”innerHTML內容/a
原創文章，作者：簡單一點，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/130543.html
微信掃一掃 
支付寶掃一掃 
