js操作CSS样式简单案例

CSS 样式包括两种形式：样式表中样式和行内样式。DOM 2 级规范

针对样式表提供了一套 API。在 DOM 2 级规范之前，还可以使用标

签对象的 style 属性访问行内样式。

行内样式

//访问元素样式1, stye属性只对行内样式有用

var box = document.getElementById(“box”);

// alert(box.style.color);
　　　　
　　　　// alert(box.style.fontSize); 对复合属性的写法是去掉中间的“—”，并

将第二个单词大写。

//alert(box.style.float); //float是关键字，因此最好不要这样写

//对float属性ie和非ie有差异：
　　
　　　　
　　　// alert(box.style.cssFloat); //非ie
　　　
　　　　// alert(box.style.styleFloat); //IE专用

//给float赋值，且兼容所有浏览器
　　
　　　　// typeof box.style.cssFloat !=“undefined”?box.style.cssFloat =

“right”:box.style.styleFloat =“right”;

任何支持 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";

内联样式和外联样式

CSSStyleSheet集合

```css
document.styleSheets  // styleSheetList集合    该属性会获得所有style元素和link元素（必须含有rel="styleSheet"）
document.styleSheets[0]  // CSSStyleSheet  我们需要的对象，可以对CSSStyleSheet进行CSS的操作。

还有其他的方法可以获得页面中的CSSStyleSheet ：

document.getElementsByTagName('link')[0] // HTMLLinkElement  (IE8+)
document.getElementsByTagName('style')[0] // HTMLLinkElement  (IE8+)

W3C标准：HTMLLinkElement对象和HTMLLinkElement对象后调用sheet属性会得到CSSStyleSheet（IE9+）

document.getElementsByTagName('link')[0].sheet     //  CSSStyleSheet
document.getElementsByTagName('style')[0].sheet    //  CSSStyleSheet

IE下：需要使用styleSheet属性（IE10-）

document.getElementsByTagName('link')[0].styleSheet     //  CSSStyleSheet
document.getElementsByTagName('style')[0].styleSheet    //  CSSStyleSheet

到这，我们已经使用了两种方法获得了CSSStyleSheet对象了。

在CSSStyleSheet对象下，有几个比较常用的属性和方法。当然

这还是得区分IE和W3C的。

W3C的属性和方法：（IE9+）

disabled // 获取或设置样式表是否被禁用

type // 获取样式表的种类 （设置时不报错，但无效）

media // 获取样式表的媒体类型 （设置时不报错，但无效）

cssRules // CSSStyleList集合，样式规则集合

ownerRule // @import导入时，指向表示导入的规则

deleteRule(index) // 删除集合中指定的规则 （index是规则序号）

insertRule(rule,index) // 向集合中添加指定的规则

// 删除第一个link标签(rel="stylesheet")下的第一个样式规则，在删除之后，所有的规则的序号就前移了一个。
document.getElementsByTagName('link')[0].sheet.deleteRule(0) ;
// 在第三个规则之后增加一个规则
document.getElementsByTagName('link')[0].sheet.insertRule('#box{background-color:blue}',3);

CSSStyleList集合:

在CSSStyleSheet上调用cssRules或rules属性后，我们就可以得

到样式规则集合，CSSStyleList集合，集合中的值是CSSStyleRule

对象。其中，CSSStyleList集合是一个含length的对象。

对于CSSStyleRule对象，有几个常用的属性：

cssText // 获取当前整个规则对应的文本 (rules不支持)

selectorText // 获取当前规则的选择器文本

style // 返回CSSStyleDeclaration对象，可以像操作行内样

式一样操作对应的那条规则（有cssText属性，同行内）