用js寫css樣式,js中寫css樣式規則

本文目錄一覽：

• 1、用JavaScript動態建立或增加CSS樣式表的實現方法
• 2、js中用cssText設置css樣式的簡單方法
• 3、怎樣用JS來添加CSS樣式
• 4、如何通過js給css添加樣式
• 5、想問一下在js中怎樣操作”css外聯樣式

用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中用cssText設置css樣式的簡單方法

如果網頁中一個

id為「no」的標籤，暫且當div標籤來tell；

想要在js中設置這個div的css樣式，很一般的做法是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.width

=

‘400px’;

obj.style.height

=

‘300px’;

如果要設置一堆又一堆的css樣式呢，太麻煩了把、

一般情況下都會結合css來添加className或者改變className達到想要的效果，但是如果你create一個元素，難道還想這樣簡單點？那就要想別的辦法了~

於是大家就寫了一個又一個的函數，經典的兩個是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

function

setStyle(obj,

css)

{

for(var

attr

in

obj){

obj.style[attr]

=

css[attr];

}

}

setStyle(obj,{width:”400px”,height:”300px”});

當然還有更簡單的，cssText：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.cssText

=

“width:400px;

height:300px;”;

當然這種方法對於create的元素初始化css樣式來說很簡單很方便。

以上就是小編為大家帶來的js中用cssText設置css樣式的簡單方法的全部內容了，希望對大家有所幫助，多多支持腳本之家~

怎樣用JS來添加CSS樣式

例如改變背景色：

1234567div id=”changeColor”使用JS改變背景色/divscriptvar cc = document.getElementById(“changeColor”);cc.style.backgoundColor=”#000″; //將背景色改為黑色cc.style.fontSize=”20px”; // 將文字大小改為20px，等號右邊也可以寫為20+”px”cc.style.color=”#fff”; //將文字顏色改為白色/script

如何通過js給css添加樣式

選中標籤，然後用style設置樣式

div id=”h5course”HTML5學堂（WX號），技術乾貨文章分享/div

script

var box = document.getElementById(‘h5course’);

box.style.color = ‘#39f’;

box.style.border = ‘2px solid #000’;

/script

想問一下在js中怎樣操作”css外聯樣式

1：獲取你要操作的標籤對象

2：用你獲取到的對象改變其標籤的樣式。代碼為：obj.style.background = “red”;

這段代碼中obj是你獲取到的標籤的對象，background是要改的css樣式

或者這樣寫：obj.style.cssText = “background:red;color:#444;font-size:16px”;

3：以上的這種方式都是動態添加元素的內聯樣式。你也可以改元素的class選擇器或者ID選擇器。

4：還有一種方法就是需要你自己封裝一個獲取外聯樣式屬性值的方法，這種方法需要處理兼容。

5：對於以上回答如有哪裡不理解請指正，追問

6：望採納