DOM系列---DOM操作样式

发文不易，若转载传播，请亲注明出处，谢谢！

一．操作样式

CSS作为(X)HTML的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关，所以我们有必要检测当前浏览器支持CSS能力的级别。

DOM1级实现了最基本的文档处理，DOM2和DOM3在这个基础上增加了更多的交互能力，这里我们主要探讨CSS，DOM2增加了CSS编程访问方式和改变CSS样式信息。

 

DOM一致性检测

功能	版本号	说明
Core	1.0、2.0、3.0	基本的DOM,用于表现文档节点树
XML	1.0、2.0、3.0	Core的XML扩展，添加了对CDATA等支持
HTML	1.0、2.0	XML的HTML扩展，添加了对HTML特有元素支持
Views	2.0	基于某些样式完成文档的格式化
StyleSheets	2.0	将样式表关联到文档
CSS	2.0	对层叠样式表1级的支持
CSS2	2.0	对层叠样式表2级的支持
Events	2.0	常规的DOM事件
UIEvents	2.0	用户界面事件
MouseEvents	2.0	由鼠标引发的事件(如：click)
MutationEvents	2.0	DOM树变化时引发的事件
HTMLEvents	2.0	HTML4.01事件
Range	2.0	用于操作DOM树中某个范围的对象和方法
Traversal	2.0	遍历DOM树的方法
LS	3.0	文件与DOM树之间的同步加载和保存
LS-Async	3.0	文件与DOM树之间的异步加载和保存
Valuidation	3.0	在确保有效的前提下修改DOM树的方法

 

//检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力

alert('DOM1级CSS能力：' + document.implementation.hasFeature('CSS', '2.0'));

alert('DOM2级CSS能力：' + document.implementation.hasFeature('CSS2', '2.0'));

 

PS：这种检测方案在IE浏览器上不精确，IE6中，hasFeature()方法只为HTML和版本1.0返回true，其他所有功能均返回false。但IE浏览器还是支持最常用的CSS2模块。

 

1.访问元素的样式

首先要知道CSS样式有三种形式（CSS内容，这儿不赘述）：

行内：就是在标签里的style属性添加的样式；

内联：就是<style>…</style>标签里书写的样式；

链接：就是通过<link href=” ”/>标签链接到的样式.

任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。

 

CSS属性及JavaScript调用

CSS属性	JavaScript调用
color	style.color
font-size	style.fontSize
float	非IE：style.cssFloat
float	IE：style.styleFloat

 

var box = document.getElementById('box');        //获取box

box.style;                                                        //CSSStyleDeclaration

box.style.color;                                                //red

box.style.fontSize;                                            //20px

box.style.cssFloat || box.style.styleFloat;             //left，非IE用cssFloat，IE用styleFloat

 

PS：以上取值方式也可以赋值，最后一种赋值可以如下：

typeof box.style.cssFloat != 'undefined' ?

box.style.cssFloat = 'right' : box.style.styleFloat = 'right';

 

DOM2级样式规范为style定义了一些属性和方法

属性或方法	说明
cssText	访问或设置style中的CSS代码
length	CSS属性的数量
parentRule	CSS信息的CSSRule对象
getPropertyCSSValue(name)	返回包含给定属性值的CSSValue对象
getPropertyPriority(name)	如果设置了!important，则返回，否则返回空字符串
item(index)	返回指定位置CSS属性名称
removeProperty(name)	从样式中删除指定属性
setProperty(name,v,p)	给属性设置为相应的值，并加上优先权

PS：Firefox、Safari、Opera9+、Chrome支持这些属性和方法。IE只支持cssText，而getPropertyCSSValue()方法只有Safari3+和Chrome支持，因此这些属性和方法用处不大，了解即可。

box.style.cssText;                                             //获取CSS代码

//box.style.length;                                             //3，IE不支持

//box.style.removeProperty('color');                    //移除某个CSS属性，IE不支持

//box.style.setProperty('color','blue');                   //设置某个CSS属性，IE不支持

 

PS：style属性仅仅只能获取行内的CSS样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到。

 

虽然可以通过style来获取单一值的CSS样式，但对于复合值的样式信息，就需要通过计算样式（计算后的样式一般指默认样式和设置后的样式）来获取。DOM2级样式，window对象下提供了getComputedStyle()方法。接受两个参数，需要计算的样式元素，第二个伪类(:hover)，如果没有伪类，就填null。

 

PS：IE不支持这个DOM2级的方法，但有个类似的属性可以使用currentStyle属性。

下列代码强烈建议手动敲一下，感受一下各浏览器的魅力：

　　var box = document.getElementById('box');

　　var style = window.getComputedStyle ?

　　 window.getComputedStyle(box, null) : null || box.currentStyle;

       alert(style .color);                                             //颜色在不同的浏览器显示格式不同

       alert(style .border);                                           //不同浏览器不同的结果

       alert(style .fontFamily);                                     //计算显示复合的样式值

       alert(style.border);                       　　　　　　　//复合型属性就无法在各浏览器中统一获取了

       alert(style.borderTopColor);    　　　　　　　　  //这种形式书写方式获取

PS：border属性是一个综合属性，所以他在Chrome显示了，Firefox为空，IE为undefined。所谓综合性属性，就是XHTML课程里的简写形式，所以，DOM在获取CSS的时候，最好采用完整写法兼容性最好，比如：border-top-color之类的。

PS：getComputedStyle()方法和currentStyle属性无所谓什么CSS样式，行内，内联，链接都可以，但是仅仅能获取，不能够赋值！！！

 

2.操作样式表

使用style属性可以设置行内的CSS样式，而通过id（非常不建议通过修改id来变换一个元素的CSS样式）和class调用是最常用的方法。

box.id = 'pox';                                                  //把ID改变会带来灾难性的问题

box.className = 'red';                                       //通过className关键字来设置样式

 

在添加className的时候，我们想给一个元素添加多个class是没有办法的，后面一个必将覆盖掉前面一个，所以必须来写个函数：

 

 1 //判断是否存在这个class
 2 
 3 function hasClass(element, className) { 
 4 
 5        return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
 6 
 7 }
 8 
 9  
10 
11 //如果不存在的话,添加一个class
12 
13 function addClass(element, className) {
14 
15        if (!hasClass(element, className))   {      
16 
17               element.className += " "+className; 
18 
19        }
20 
21 }
22 
23  
24 
25 //如果存在的话, 删除一个class
26 
27 function removeClass(element, className) {  
28 
29        if (hasClass(element, className)) {        
30 
31               element.className = element.className.replace(
32 
33　　　　　　　　　　　　　　 new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');  
34 
35        }
36 
37 } 
38  

 

之前我们使用style属性，仅仅只能获取和设置行内的样式，如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了，然后我们又学习了getComputedStyle和currentStyle，这只能获取却无法设置。

CSSStyleSheet类型表示通过<link>元素和<style>元素（注意这两种形式的都包括）包含的样式表。首先本身我们可以通过下面的方式获取两种元素：

document.implementation.hasFeature('StyleSheets', '2.0')    //是否支持DOM2级样式表

       document.getElementsByTagName('link')[0];       //HTMLLinkElement（<link> 形式）

       document.getElementsByTagName('style')[0];      //HTMLStyleElement (<style> 形式)

 

这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类型，但CSSStyleSheet类型更加通用一些。得到这个类型非IE使用sheet属性，IE使用styleSheet：

       var link = document.getElementsByTagName('link')[0];

　　 var sheet = link.sheet || link.styleSheet;               //得到CSSStyleSheet

 

属性或方法	说明
disabled	获取和设置样式表是否被禁用
href	如果是通过<link>包含的，则样式表为URL，否则为null
media	样式表支持的所有媒体类型的集合
ownerNode	指向拥有当前样式表节点的指针
parentStyleSheet	@import导入的情况下，得到父CSS对象
title	ownerNode中title属性的值
type	样式表类型字符串
ownerRule	@import导入的情况下，指向表示导入的规则，IE不支持
cssRules	样式表包含样式规则的集合，IE不支持
deleteRule(index)	删除cssRules集合中指定位置的规则，IE不支持
insertRule(rule, index)	向cssRules集合中指定位置插入rule字符串，IE不支持

 

　　sheet.disabled;                                                  //false，可设置为true

　　sheet.href;                                                       //css的URL

　　sheet.media;                                                     //MediaList，集合

　　sheet.media[0];                                                //第一个media的值

　　sheet.title;                                                        //得到title属性的值（如：<link title=”a”/>）

　　sheet.cssRules;                                                       　　　　//CSSRuleList，样式表规则集合

　　sheet.deleteRule(0);                                               　　　　//删除第一个样式规则

　　sheet.insertRule("body {background-color:red}", 0);　　//在第一个位置添加一个样式规则

 

注意：首先需要明确，什么是样式规则？一群样式的集合表示一个规则（比如说，在.css文件中，每一个花括号就表示一个样式规则），当然这儿的样式既包括连接也包括内联样式。

PS：除了几个不用和IE不支持的我们忽略了，还有三个有IE对应的另一种方式：

　　sheet.rules;                                                     　　　　   //代替cssRules的IE版本

　　sheet.removeRule(0);                                      　　　　  //代替deleteRule的IE版本

　　sheet.addRule("body", "background-color:red", 0);　　//代替insertRule的IE版本

 

做一个小小的概括性代码：

 1 var link = document.getElementsByTagName('link')[0];
 2 
 3        var sheet = link.sheet || link.styleSheet;
 4 
 5        //下面两行代码通过FireBug的css实时编辑查看效果
 6 
 7        sheet.deleteRule(0);                                               //删除第一个样式规则
 8 
 9        sheet.insertRule("body {background-color:red}", 0);//在第一个位置添加一个样式规则
10 
11        sheet.cssRules;    //CSSRuleList，样式规则集合
12 
13        //IE
14 
15        //sheet.removeRule(0);                                    //代替deleteRule的IE版本
16 
17        //sheet.addRule("body", "background-color:red", 0);//代替insertRule的IE版本

除了刚才的方法可以得到CSSStyleSheet类型，还有一种方法是通过document的styleSheets属性(与上面的相比这个属性更常用)来获取。

　　document.styleSheets;                      　　　　   //StyleSheetList，集合

　　var sheet = document.styleSheets[0]; 　　　　//CSSStyleSheet第一个样式表对象(<link>or<style>)

 

为了添加CSS规则，并且兼容所有浏览器，我们必须写一个函数：

 1 var sheet = document.styleSheets[0];
 2 
 3 insertRule(sheet, "body", "background-color:red;", 0);
 4 
 5  
 6 
 7 function insertRule(sheet, selectorText, cssText, position) {
 8 
 9 //如果是非IE
10 
11        if (sheet.insertRule) {
12 
13               sheet.insertRule(selectorText + "{" + cssText + "}", position);
14 
15 //如果是IE
16 
17        } else if (sheet.addRule) {
18 
19               sheet.addRule(selectorText, cssText, position);
20 
21        }
22 
23 }
24 
25  

为了删除CSS规则，并且兼容所有浏览器，我们必须写一个函数：

 1 var sheet = document.styleSheets[0];
 2 
 3 deleteRule(sheet, 0);
 4 
 5 function deleteRule(sheet, index) {
 6 
 7     //如果是非IE
 8 
 9     if (sheet.deleteRule) {
10 
11         sheet.deleteRule(index);
12 
13     //如果是IE
14 
15     } else if (sheet.removeRule) {
16 
17         sheet.removeRule(index);
18 
19     }
20 
21 }        

 

通过CSSRules属性(非IE)和rules属性(IE)，我们可以获得样式表的规则集合列表。这样我们就可以对每个样式进行具体的操作了。

       var sheet = document.styleSheets[0];                  //CSSStyleSheet

       var rules = sheet.cssRules || sheet.rules;               //CSSRuleList，样式表的规则集合列表

       var rule = rules[0];                                           //CSSStyleRule，样式表第一个规则

 

CSSStyleRule可以使用的属性

属性	说明
cssText	获取当前整条规则对应的文本，IE不支持
parentRule	@import导入的，返回规则或null，IE不支持
parentStyleSheet	当前规则的样式表，IE不支持
selectorText	获取当前规则的选择符文本
style	返回CSSStyleDeclaration 对象，可以获取和设置样式
type	表示规则的常量值，对于样式规则，值为1，IE不支持

 

rule.cssText;                                                     //当前规则的样式文本

rule.selectorText;                                              //#box，样式的选择符

rule.style.color;                                                //red，得到具体样式值

 

PS：Chrome浏览器在本地运行时会出现问题，rules会变成null，只要把它放到服务器上允许即可正常。

 

总结：三种操作CSS的方法，第一种style行内，可读可写；第二种行内、内联和链接，使用getComputedStyle或currentStyle，可读不可写；第三种cssRules或rules，内联和链接可读可写.

简单来一个综合性小例子：

html代码片段：

 1 <link rel="stylesheet" title='AA' type="text/css" href="DOM.css" />
 2 
 3 <style type="text/css">
 4 
 5    #box{
 6 
 7          background:green;
 8 
 9        }
10 
11 </style>
12 
13 <script type="text/javascript" src="DOM.js"></script>
14 
15 </head>
16 
17 <body>
18 
19  
20 
21 <div id="box">测试Div</div>
22 
23  
24 
25 </body>
26 
27 </html>
28 
29  

 

CSS代码：

 1 #box {
 2 
 3        font-size:20px;
 4 
 5        color:red;
 6 
 7        background:#ccc;
 8 
 9 }
10 
11 #pox {
12 
13        color:green;
14 
15        border:1px solid black;
16 
17 }

 

 

JS代码：

 1 window.onload = function () {
 2 
 3        //下面这个获取的是链接样式<link/>
 4 
 5        var sheet = document.styleSheets[0];                  //CSSStyleSheet
 6 
 7        var rules1 = sheet.cssRules || sheet.rules;           //CSSRuleList，样式表的规则集合列表
 8 
 9        var rule1 = rules1[0];                                //CSSStyleRule，链接样式表第一个规则
10 
11        alert(rule1.cssText);
12 
13        alert(rule1.selectorText);
14 
15        alert(rule1.style.color);    //red，得到具体的单条样式值
16 
17        rule1.style.color = 'blue';
18 
19  
20 
21        //下面这个获取的是行内样式<style></style>
22 
23        var sheet = document.styleSheets[1];                  //CSSStyleSheet
24 
25        var rules2 = sheet.cssRules || sheet.rules;           //CSSRuleList，样式表的规则集合列表
26 
27        var rule2 = rules2[0];                                //CSSStyleRule，行内样式表第一个规则
28 
29        alert(rule2.cssText);
30 
31        alert(rule2.selectorText);
32 
33        alert(rule2.style.color);
34 
35 };

 持之以恒，戒浮戒躁！