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>

演示效果如下：