怎樣在js中寫css,js或者怎麼寫

本文目錄一覽：

• 1、css在js裡面怎麼連寫
• 2、如何在JS中定義CSS
• 3、js 寫CSs樣式
• 4、js中用cssText設置css樣式的簡單方法
• 5、筆記：JS設置CSS樣式的幾種方式

css在js裡面怎麼連寫

要在JS中修改樣式，可以這樣：

var dom = document.getElementById(‘abc’);

dom.style.padding = ‘8px’;  //必須提供字元串，數字+單位，不能直接寫數字

dom.style.margin = ‘0 auto’;

dom.style.backgroundColor = ‘#0F0’;  //CSS屬性中的background-color之類有連字元的，去掉連字元，採用駝峰式，首字母小寫，後面所有單詞首字母大寫

//瀏覽器特有屬性：

dom.style.webkitAppearance = ‘button’;  //對應-webkit-appearance屬性

如何在JS中定義CSS

var domObj = document.getElementById(“tagId”);

//使用domObj.style來設置css：

domObj.style.backgroundColor=”#000″;//對應style里 background-color

domObj.style.fontSize=”#000″;//對應style里 font-size

//如果對這個表不太清楚可以在w3c上查一下

//但是一般有個規律就是，首單詞小寫 「-」後面的第一個字母大寫，如：font-size 就是fontSize

如果是想更換標籤的class的話，可以使用

domObj.className = “other_class”;

js 寫CSs樣式

JavaScript訪問修改樣式表,可以方便的動態修改頁面:

一、訪問元素中style屬性的CSS樣式

這個可以直接使用style對象方便的訪問，例如：

div id = “mdiv” style=”background-color:blue;”…./div

訪問CSS的方法是:

script type=”text/javascript”

//獲得元素

var oDiv = document.getElementyId(“mdiv”);

//訪問元素的style對象,再訪問對象中的屬性,也可以修改屬性的值,直接為他賦值

alert(oDiv.style.backgroundColor);

/script

二、訪問外部定義的CSS樣式（類定義的CSS樣式）

這個沒法使用上面的方法去訪問，因為CSS數據不是存儲在style屬性中，它是存儲在類中的。

訪問方法：先取得定義類的樣式表的引用，用document.styleSheets集合實現這個目的，這個集合包含HTML頁面中所有的樣式表，DOM為每個樣式表定義一個cssRules的集合，這個集合中包含定義在樣式表中的所用CSS規則（注意：Mozilla和Safasi中是 cssRules，而IE中式rules）。

例如：

style

/*第一條規則*/

div.ss{

background-color:red;

width:101px;

}

/*第二條規則*/

a.btn2{

background:url(imag/2-AccessCtl.jpg);

}

/style

訪問CSS:

var ocssRules = document.styleSheets[0].cssRules||document.styleSheets[0].rules;

//訪問第一條規則

alert(ocssRules[0].style.backgroundColor);

//設置值

ocssRules[0].style.width = “992px”;

//訪問第二條規則

alert(ocssRules[1].style.background);

//設置值

ocssRules[0].style.background = “url(imag/3-back.jpg);”;

以上內容是百度出來的

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樣式的幾種方式

1、直接更改，比如：

xID.style.display = “block”; // 更改display屬性，會覆蓋css中的定義。

xID.style.display = “”;      // 取消js更改display屬性，以css樣式為準。

這裡的xID，是通過id獲取的標籤。當然，也可能是通過tagName之類的獲取的標籤。

這種方式，簡單直接。但是要修改大量的樣式的時候，不適合。所以，我更推薦第二種方式。

2、更改類名

xID.className = “xx   yy”;

如果有多個類，就用空格隔開。前提，在樣式中要有已有類的定義。比如這裡的xx和yy類，在css中應該是寫好的。

這種方式把所有的樣式寫在了css文件中，適合更改較多的樣式以及炫酷的樣式。js就只做一件事情：改類。至於這個類會把標籤變成什麼樣子，交給css吧。

通過jquery也可以達到如上的效果：

$(“#xID”).css({

  fontSize:”12px”,

  display:”block”

});  // 直接更改樣式

$(“#xID”).addClass(“xx”);  // 增加刪除類

$(“#xID”).removeClass(“xx”);