DOM--5 动态修改样式和层叠样式表

W3C DOM2 样式规范

CSSStyleSheet对象

表示所有css样式表，包括外部link和嵌入style的;通过document.styleSheets属性可以获得文档中CSSStyleSheet对象的列表；其中每个CSSStyleSheet都具有以下属性：

• type: 值始终是text/css;
• disabled: 布尔值，表示相应的样式表是否应用与当前文档(false)还是被禁用(true);
• href: 样式表路径，嵌入的则是null;
• media: 表示样式表应用的目标设备, 中的media属性
• cssRules: 是一个只读的CSSRuleList列表对象，包含样式表中所有的CSSRule对象；
• insertRule(rule, index): 添加新的样式声明；index表示列表对象cssRules的值；
• deleteRule(index), 用于样式表中移除规则；

CSSStyleRule对象

每个CSSStyleSheet对象内部包含着一组CSSStyleRule对象 document.styleSheets[0].cssRule, 每个对象 document.styleSheets[0].cssRule[0]有如下属性:

• type, 继承自CSSRule对象的一个属性，对CSSStyleRule类型而言是1；
• cssText: 包含以只付出形式表示的当前状态下的全部规则；如果这些规则被其他DOM方法改变了，那么这个字符串也会相应改变;
• parentStyleSheet: 引用父CSSStyleSheet对象;
• parentRule: 如果规则位于另一个规则中，该属性则引用另一个CSSRule对象;
• selectorText: 包含规则的选择符；

CSSStyleDeclaration对象

这是用的最多的对象，表示一个元素的style属性（内嵌在元素中的值） A.$('a').style

• cssText：包含以字符串形式表示的全部规则;
• parentRule: 讲引用CSSStyleRule对象；
• getPropertyValue(propertyName), 返回一个字符串形式的CSS样式属性值;
• removeProperty(propertyName), 从声明中移除特定的属性；
• setProperty(propertyName, value, priotity), 用于设置特定css属性的值;

把样式置于DOM脚本之外

style属性

注意通过此属性只能访问到在元素的style属性中以嵌入方式声明的css属性，无法访问层叠样式表或从父类继承的属性

• element.style.setProperty('background-color','red'); //在ie8及以下无效
• element.style.backgroundColor = 'red';//都有效

style引用的是HTMLElement对象的style属性,本身是CSSStyleDeclaration对象；一般使用第一种并兼容第二种

基于className切换样式

• element.setAttribute('class','newClassName'); //在ie8及以下无效
• element.className = 'newClassName'; //都有效

className引用的是HTMLElement对象的class属性，兼容性考虑一般用第二种方法

切换样式表

• 使用备用的样式表

常用属性

* type
* href
* media
* rel, 表示样式表于文档之间的关系* 设置'stylesheet' 指定一个样式表立即应用到文档* 设置'alternate stylesheet' 将其作为备用样式表；浏览器载入该样式表时会将其disbaled设置为true；
* disabled, 表示样式表是否起作用
* title, 标题，也在脚本中用到；

通过js操作disabled值改变样式

• 切换body元素的className

先用设置公用样式，然后分别设置body.a;body.b等及下面的元素样式；最后通过改变body的classname来改变样式

• 动态载入和移除样式表

直接通过js删减样式表

修改css规则

• document.styleSheets能获得所有内嵌和外链的样式表,可以通过href判断

访问计算样式

DOM2样式规范在document.defaultView中包含了一个getComputedStyle()方法；返回一个只读的CSSStyleDeclaration对象

var elemet = A.$('example');
var styles = document.defaultVIew.getComputedStyle(element);
var color = styles.getProperty('background-color');

简单的渐变效果

function fadeColor(from ,to ,callback , duration, framesPerSecond) {function doTimeout(color, frame) {setTimeout(function() {try{callback(color);} catch(e) {A.log.write(e);}}, (duration * 1000 / framesPerSecond) * frame );}var duration = duration || 1;var framesPerSecond = framesPerSecond || duration * 15;var r, g ,b;var frame = 1;doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0);while(frame < framesPerSecond + 1) {r = Math.ceil(from.r * ((framesPerSecond - frame) / framesPerSecond) + to.r * (frame / framesPerSecond));g = Math.ceil(from.g * (framesPerSecond - frame) / framesPerSecond + to.g * (frame / framesPerSecond));b = Math.ceil(from.b * ((framesPerSecond - frame) / framesPerSecond) + to.b * (frame / framesPerSecond));doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame);frame++;}}
fadeColor({r:0, g:255, b:0}/*开始颜色*/, {r: 255, g:255, b:255}/*结束颜色*/, function(color) {A.setStyleById('style', {'background-color': color})
});