javascript樣式表分為：內嵌式樣式表；內聯式樣式表；外聯式樣式表。

操作元素的style樣式屬性（內嵌式）

css樣式屬性和javascript樣式屬性對比：

Css樣式屬性?javascript樣式屬性

??background-color style.backgroundColor

??color style.color

??font style.font

??font-family style.fontFamily

當屬性名有2個單詞以上時就要使用駝峰命名。

如將一個<div?/>id="div1"的CSS邊框屬性更改為"1px?solid?red",背景色改為green：

var?oDiv?=?document.getElementByIdx_x("div1");

oDiv.style.border?=?"1px?solid?red";

oDiv.style.backgroundColor?=?green;

DOM為style提供了幾種方法：

1.?getPropertyValue(propertyName)?--?返回CSS屬性的屬性值的字符串值。

2.?getPropertyPriority()?--?如果CSS屬性規則指定了"！import",則返回字符串?"!import",否則返回空字符串。

3.?item(index)?--?返回指定索引的CSS屬性名稱。

4.?removeProperty(propertyName)?--?從CSS定義中刪除propertyName。

5.?setProperty(propertyName,value,priority)?--?設置CSS屬性propertyName為value?以及給定的優先級。

操作外部樣式表及style元素中的樣式

DOM指定了一個樣式表對象，該對象如下屬性：

1.?disabled?--?指示樣式表是否disabled；

2.?href?--?外部樣式表的URL；

3.?media?--?在media屬性中指定的可以使用樣式表的媒體類型列表；

4.?ownerNode?--?指定樣式表的DOM節點（<link?/>或<style?/>元素）；

5.?parentStyleSheet?--?如果樣式表被包含在CSS@import語句中，本屬性指向語句 發現的樣式；

6.?title?--?通過HTML的title屬性指定的樣式列表；

7.?type?--?樣式表的mime類型。

訪問DOM瀏覽器樣式表規則使用cssRules集合；訪問IE樣式規則使用rules集合。

如判斷使用哪個集合名：

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

操作最終樣式（這種只能讀）

IE使用currentStyle對象：如顯示id為div1的顏色

var?oDiv?=?document.getElementByIdx_x("div1");

alert(oDiv.currentStyle.color);

DOM使用getComputedStyle(要獲取樣式表的元素，偽元素)：如顯示id為div1的顏色

var?oDiv?=?document.getElementByIdx_x("div1");

alert(document.defaultView.getComputedStyle(oDiv,null).color);

總結

以上是生活随笔為你收集整理的使用DOM操作样式表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。