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

});