JS操作CSS樣式（非常詳細）

CSS 樣式包括兩種形式：樣式表中樣式和行內樣式。DOM 2 級規範針對樣式表提供了一套 API。在 DOM 2 級規範之前，還可以使用標籤物件的 style 屬性存取行內樣式。

讀寫行內樣式

任何支援 style 屬性的 HTML 標籤，在 JavaScript 中都有一個對應的 style 指令碼屬性。style 是一個可讀可寫的物件，包含了一組 CSS 樣式。

使用 style 的 cssText 屬性可以返回行內樣式的字串表示。同時 style 物件還包含一組與 CSS 樣式屬性一一對映的指令碼屬性。這些指令碼屬性的名稱與 CSS 樣式屬性的名稱對應。在 JavaScript 中，由於連字元是減號運算子，含有連字元的樣式屬性（font-family），指令碼屬性會以駝峰命名法重新命名（如 fontFamily）。

範例

對於 border-right-color 屬性來說，在指令碼中應該使用 borderRightColor。

<div id="box">盒子</div>
<script>
    var box = document.getElementById("box");
    box.style.borderRightColor = "red";
    box.style.borderRightStyle = "solid";
</script>

使用 CSS 指令碼屬性時，需要注意以下幾個問題。

1) float 是 JavaScript 保留字，因此使用 cssFloat 表示與之對應的指令碼屬性的名稱。

2) 在 JavaScript 中，所有 CSS 屬性值都是字串，必須加上引號。

elementNode.style.fontFamily = "Arial, Helvetica, sans-serif";
elementNode.style.cssFont = "left";
elementNode.style.color = "#ff0000";

3) CSS 樣式宣告結尾的分號不能夠作為指令碼屬性值的一部分。

4) 屬性值和單位必須完整的傳遞給 CSS 指令碼屬性，省略單位則所設定的指令碼樣式無效。

elementNode.style.width = "100px";
elementNode.style.width =  width + "px";

使用 style 物件

DOM 2 級規範為 style 物件定義了一些屬性的方法，簡單說明如下。

• cssText：返回 style 的 CSS 樣式字串。
• length：返回 style 的宣告 CSS 樣式的數量。
• parentRule：返回 style 所屬的 CSSRule 物件。
• getPropertyCSSValue()：返回包含指定屬性的 CSSValue 物件。
• getPropertyPriority()：返回包含指定屬性是否新增了 !important 命令。
• item()：返回指定下標位置的 CSS 屬性的名稱。
• getPropertyValue()：返回指定屬性的字串值。
• removeProperty()：從樣式中刪除給定屬性。
• setProperty()：為指定屬性設定值，也可以附加優先權標誌。

下面重點介紹幾個常用的方法：

getPropertyValue() 方法

getPropertyValue() 能夠獲取指定元素樣式屬性的值。用法如下：

var value = e.style.getPropertyValue(propertyName)

引數 propertyName 表示 CSS 屬性名，不是 CSS 指令碼屬性名，複合名應使用連字元進行連線。

【範例1】下面程式碼使用 getPropertyValue() 方法獲取行內樣式中 width 屬性值，然後輸出到盒子內顯示。

<script>
    window.onload = function(){
        var box = document.getElementById("box");   //獲取<div id="box">
        var width = box.style.getPropertyValue("width");  //讀取div元素的width屬性值
        box.innerHTML =  "盒子寬度：" + width;    //輸出顯示width值
    }
</script>
<div id="box" style="width:300px; height:200px;border:solid 1px red" >盒子</div>

演示效果如下：

---