hosteons中文网

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>

演示效果如下：