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