js权威指南——16章

16.4 查询计算出的样式

var title=document.getElementById("title");
var titleStyles=window.getComputedStyle(element,null);

计算样式是一组属性值，由浏览器通过把内联样式结合所有连接样式表中所有可应用的样式规则后导出得到的：
一组在显示元素时实际使用的属性值。
计算样式是只读的，内联样式可写的

计算样式与内联样式的区别

- 计算样式是只读的
- 计算样式的值为绝对值。（单位px）
- 不计算复合属性（不查询margin，只查询marginTop等具体属性）
- 计算样式的cssText未定义

非期待值

- fontFamily，可能不会返回具体值。
- top left等尺寸可能返回auto。

兼容性

- 在ie8及之前的版本没有实现
- ie拥有自己的currentStyle属性，但是相对值没有转换为绝对值。颜色可能返回非精确颜色值  

16.5 脚本化CSS类

e.className="attention ready";
//e为element，对e改变类，会使原始值被覆盖

html5更新

HTML5为元素定义了一个classList属性，值为DOMTokenList对象

- 具有add(),remove(),toggle(),contains()等方法
- 实时的

16.6 脚本化样式表

• 开启和关闭样式表

document.styleSheets[ss].disabled=true//or false;

• 查询 插入 删除 样式表规则

//查询
document.styleSheets[0].cssRules//其他浏览器
document.styleSheets[0].rules//ie8及之前

//插入
document.styleSheets[0].insertRule()//其他浏览器,一个参数
document.styleSheets[0].addRule()//ie8及之前，选择器文本和样式文本作为两个参数

//删除
document.styleSheets[0].deleteRule()//其他浏览器,一个参数
document.styleSheets[0].removeRule()//ie8及之前

• 创建新样式表

//ie8及之前
document.createStyleSheet();
//其他浏览器
document.createElement("style");