读写行内样式
任何支持 style 属性的 HTML 标签，在 JavaScript 中都有一个对应的 style 脚本属性。style 是一个可读可写的对象，包含了一组 CSS 样式。
使用 style 的 cssText 属性可以返回行内样式的字符串表示。同时 style 对象还包含一组与 CSS 样式属性一一映射的脚本属性。这些脚本属性的名称与 CSS 样式属性的名称对应。在 JavaScript 中，由于连字符是减号运算符，含有连字符的样式属性（font-family），脚本属性会以驼峰命名法重新命名（如 fontFamily）。
示例
对于 border-right-color 属性来说，在脚本中应该使用 borderRightColor。
使用 CSS 脚本属性时，需要注意以下几个问题。
1) float 是 JavaScript 保留字，因此使用 cssFloat 表示与之对应的脚本属性的名称。
2) 在 JavaScript 中，所有 CSS 属性值都是字符串，必须加上引号。
3) CSS 样式声明结尾的分号不能够作为脚本属性值的一部分。
4) 属性值和单位必须完整的传递给 CSS 脚本属性，省略单位则所设置的脚本样式无效。
使用 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 属性值，然后输出到盒子内显示。
setProperty() 方法
setProperty() 方法为指定元素设置样式。用法如下：
e.style.setProperty(propertyName, value, priority)
参数说明如下：
- propertyname：设置 CSS 属性名
- value：设置 CSS 属性值，包含属性值的单位。
- priority：表示是否设置 !important 优先级命令，如果不设置可以以空字符串表示。
【示例2】在下面示例中使用 setProperty() 方法定义盒子的显示宽度和高度分别为 400 像素和 200 像素。
removeProperty() 方法
removeProperty() 方法可以移出指定 CSS 属性的样式声明。具体用法如下：
e.style.removeProperty(propertyName)
item() 方法
item() 方法返回 style 对象中指定索引位置的 CSS 属性名称。具体用法如下：
var name = e.style.item(index)
参数 index 表示 CSS 样式的索引号。
getPropertyPriority() 方法
getPropertyPriority() 方法可以获取指定 CSS 属性中是否添加了 !important 优先级命令，如果存在则返回“important”字符串，否则返回空字符串。
【示例3】在下面示例中，定义鼠标指针移过盒子时，设置盒子的背景色为蓝色，边框颜色为红色，当移出盒子时，又恢复到盒子默认设置的样式；而单击盒子时则在盒子内输出动态信息，显示当前盒子的高度和宽度。
显示效果如下：
