首页 > 代码库 > DOM系列---DOM操作样式
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=http://www.mamicode.com/” >标签链接到的样式.
任何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 };
持之以恒，戒浮戒躁！