HTML中定義樣式的方式有三種：通過<link/>元素包含外部樣式表文件、使用<style/>元素定義嵌入式樣式，以及使用style特性定義針對特定元素的樣式。“DOM2級樣式"模組圍繞這3種應用樣式提供了一套API。要確定瀏覽器是否支援DOM2級定義的CSS能力，可以使用下列程式碼：

var supportsDOM2CSS=document.implementation.hasFeature("CSS","2.0";
var supportsDOM2CSS2=document.implementation.hasFeature{"CSS2”，“2.0”);

1 訪問元素的樣式

任何支援style特性的HTML元素在JavaScript中都有一個對應的style屬性。這個style物件是CSSStyleSeclaration例項，包含著通過HTML的style特性指定的所有樣式資訊，但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式。對於使用短劃線（如background-color）的CSS屬性名，必須將其轉換為駝峰大小寫形式，才能通過JavaScript來訪問。

多數情況下，都可以通過簡單的轉換屬性名的格式來實現轉換。其中一個不能直接轉換的CSS屬性就是float，因為float是JavaScript中的保留字。“DOM2級樣式”規範規定樣式物件上相應的屬性名應該是CSSFloat；Firefox、safari、opera和chrome都支援這個屬性，而IE支援的則是styleFloat。

通過style物件可以取得在style特性中指定的樣式

<div id="myDiv" style="background-color:blue;width:100px;height:100px></div>

在style特性中指定的樣式資訊可以通過下列程式碼取得

console.log(myDiv.style.backgroundColor);
console.log(myDiv.style.width );

也可以通過JavaScript為其改變樣式

myDiv.style.width="200px";

DOM樣式的屬性和方法

”DOM2級樣式規範為style物件定義了一些屬性和方法。這些屬性和方法在提供元素的style特性值的同時，也可以修改樣式。

cssTest：在讀取模式下，cssTest返回瀏覽器對style特性中css程式碼的內部表示。在寫入模式下，賦給cssTest的值會重寫整個style特性的值

length：元素的css屬性的數量

parentRule:表示CSS資訊的CSSRule物件

getPropertyCSSValue(propertyName)：返回給定屬性值的CSSValue物件

getPropertyValue(propertyName)：返回給定屬性的字串值

item：返回規定你跟位置的css屬性的名稱

使用getPropertyValue()方法可以取得屬性名，進一步取得屬性值

<div id="div1" style="background-color: red;height: 100px;">顏色</div>

var div=document.getElementById("div1");
var prop,value,i,len;
for(i=0,len=div.style.length;i<len;i++){
	prop=div.style[i];
	value=div.style.getPropertyValue(prop);
	console.log(prop+" "+value);
}

執行結果

要從元素的樣式中移除某個css屬性，需要使用removeProperty()方法

div.style.removeProperty("height");

計算的樣式
雖然style物件能夠提供支援style特性的任何元素的樣式資訊，但他不包含那些從其他樣式表層疊而來並影響到當前元素的樣式資訊。“DOM2級樣式”增強了document.defaultView，提供了getComputedStyle（）方法。該方法返回一個CSSStyleDeclaration物件，其中包含當前元素所有計算的樣式（style特性中的css屬性覆蓋內聯樣式的css屬性，覆蓋外部引用樣式的屬性）

var div2=document.getElementById("div2"); 
var computedStyle=document.defaultView.getComputedStyle(div2,null);
console.log(computedStyle.backgroundColor);

2 操作樣式表

CSSStyleSheet型別表示的是樣式表，包括通過<link>元素包含的樣式表和在<style>元素中定於的樣式表。該物件是一套只讀的介面，使用下面的程式碼可以確定瀏覽器是否支援DOM2級樣式表

var supportsDOM2StyleSheets=document.implementation.hasFeature("StyleSheets","2.0");

應用於文件的所有樣式表是通過document.styleSheets集合來表示的。通過這個集合的length屬性可以獲知文件中樣式表的數量，而通過方括號或item()方法可以訪問每一個樣式表。

cssRules物件表示樣式表中的每一條規則。CSSRule是一個供其他多種型別繼承的基型別，其中最常見的是CSSStyleRule型別，表示樣式資訊.CSSStyleRule物件包含的屬性常用的有cssText（返回整條規則對應的文字）、selectorText（返回當前規則的選擇符文字）、style（通過它設定和取得規則中特定的樣式值）

var sheet=document.styleSheets[0];
console.log(sheet);
var rules=sheet.cssRules||sheet.rules;
console.log(rule.style.cssText);