DOM操作样式

来源：互联网发布：古生物学就业知乎编辑：程序博客网时间：2024/06/06 18:55

1.访问元素的样式
首先要知道CSS样式有三种形式（CSS内容，这儿不赘述）：
行内：就是在标签里的style属性添加的样式；
内联：就是<style>…</style>标签里书写的样式；
链接：就是通过<link href=” ”/>标签链接到的样式.
任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。
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';
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是没有办法的，后面一个必将覆盖掉前面一个，所以必须来写个函数：
之前我们使用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
注意：首先需要明确，什么是样式规则？一群样式的集合表示一个规则（比如说，在.css文件中，每一个花括号就表示一个样式规则），当然这儿的样式既包括连接也包括内联样式。
PS：除了几个不用和IE不支持的我们忽略了，还有三个有IE对应的另一种方式：
　　sheet.rules; 　　　　 //代替cssRules的IE版本
　　sheet.removeRule(0); 　　　　 //代替deleteRule的IE版本
　　sheet.addRule("body", "background-color:red", 0);　　//代替insertRule的IE版本

0 0