DOM系列---DOM操作样式

标签：c   style   class   blog   code   java   

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

一．操作样式

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

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

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调用

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定义了一些属性和方法

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

　　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可以使用的属性

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 };

 持之以恒，戒浮戒躁！

DOM系列---DOM操作样式,布布扣,bubuko.com

DOM系列---DOM操作样式

标签：c   style   class   blog   code   java   

原文地址：http://www.cnblogs.com/ttcc/p/3766190.html