HTML中定义的样式一共有三种方式：
1. 外部样式表，使用<link>元素导入外部的样式表，样式表都是.css类型的文件；
2. 嵌入样式，使用<style>在HMTL文档中定义的样式；
3. 元素特定样式：即在某个特定标签中style属性定义的样式；
元素的style属性
JavaScript为每个元素提供了一个style属性，让我们可以方便的用编程的方式控制样式。这个style对应的是元素特定样式中的style属性，比如有一个<div id="myDiv" style="border: 4px solid green; width: 100px;"></div>标签元素，JavaScript中的style属性就是对应标签中的style属性。我们可以这样使用：
var div = document.getElementById("myDiv");
div.style.width = "200px"; // 可读写，修改宽度之后，浏览器会马上呈现变化（建议最好要使用px之类的度量单位，否则浏览器可能忽略）
几乎素所有的CSS样式都可以用style进行访问和设置，而且使用这些属性有一些通用的规则：
CSS属性 JavaScript属性
color style.color
font-family style.fontFamily
如果CSS中的属性是带有-符号的，就去掉它，然后变成驼峰的拼写方式就变成了JavaScript的属性。但是有一个例外，就是float的JavaScript属性是cssFloat，IE则是styleFloat。在DOM2级的样式中还为style属性定义了一些新的属性和方法，下面列出一些比较有用的：
cssText：返回整个style中定义的CSS样式字符串，上面的例子就是："border: 4px solid green; width: 100px;"。如果给它赋值就会重写整个style样式；
length：CSS样式的数量，一组键值对算一个；
getPropertyValue(cssName)：返回参数指定的css属性名对应的值；
removeProperty(cssName)：删除参数指定的css属性；
item(index)：返回索引对应的css属性的名字；
计算样式
上面提到的style属性只会针对某个特定的元素进行样式设置。如果某个元素还引入了外部样式表或者嵌入样式，元素可能会使用class属性导入一些样式，也可能有一些全局的样式，即为div或者body一类标签所设置的样式。对于这么多样式，浏览器会按照一定的方式进行层叠计算，然后得出最后的样式，再应用在元素上。计算的步骤如下：
1. 先计算全局的样式，即那些为某一类标签所设定的样式；
2. 然后计算class属性中设定的样式，如果有部分CSS属性的样式值和第一步骤的样式值重叠，就忽略上一个步骤的样式，应用当前的样式；如果class属性中引用了多个样式，那么从左到右依次计算，按照后面的样式会覆盖前面的样式为原则；
3. 最后再计算style属性中的样式，也会按照后面的样式覆盖前面的样式为原则；
重叠到最后得出的样式就叫计算样式，DOM2级中定义了一个属性叫document.defaultView，这个属性有一个方法叫getComputedStyle(元素)可以得出指定元素的最后的计算样式。用法如下：
var computedStyle = document.defaultView.getComputedStyle( myDiv );
alert( computedStyle.width );取出的计算样式都是只读的，无法直接修改。对于IE并不支持这个属性，但是有一个替代属性：currentStyle。这个属性来自每个元素自身，所以兼容性的写法就是：
function getComputedStyle( element ) {
if ( typeof document.defaultView.getComputedStyle === "function" ) {
return document.defaultView.getComputedStyle( element );
}
else {
return element.currentStyle;
}
}
操作样式表
无论是用<link>标签引入外部样式表，还是使用<style>标签创建的嵌入样式表，都属于StyleSheet类型，我们可以通过编程的方式访问这些样式表对象。
DOM2级提高了一个document.styleSheets的集合对象，里面保存了当前文档使用的所有样式表对象，我们只需要用[]加索引就可以像数组一样取出某个特定的样式表对象。除此之外，我们也可以通过<link>和<style>标签获取对应的样式表对象，IE使用styleSheet属性，其他浏览器使用sheet属性：兼容性的代码如下：
function getCSSStyleSheet( sheetElement ) {
return sheetElement.sheet || sheetElement.styleSheet;
}
var link = document.getElementsByTagName("link")[0];
var sheet = getCSSStyleSheet( link ); // 取出样式表对象样式表对象有很多使用的属性和方法：
disabled： 可读写，默认为false表示不禁用该样式表，设置成true就会立即禁用该样式表，浏览器也会重新计算样式；
href： 引入样式表的url，如果是嵌入样式，则为null；
ownerNode：指向引用该样式表的节点，可能是<link>或<style>；
type：类型，样式表则是“text/css”；
cssRules：样式表中的规则，IE用rules属性代替，可以用[index]的方式取出其中的某条规则；
deleteRule(index)：删除样式表中指定i的index的那条规则，IE中用removeRule代替；
insertRule(rule, index)：在样式表中指定位置插入一条规则，IE中用addRule代替；
关于CSS中的规则，其实就像如下的一个样式：
div {
width: 100px;
height: 100px;
}这就是某个样式表中的一条规则，它属于CSSStyleRule类型的一个对象，所以它也有自己的属性和方法，常用的有：
cssText：返回这个规则的文本值，“div { width: 100px; height: 100px; }”；
parentStyleSheet：引用当前样式表；
selectorText：选择器的文本，如div；
style：规则中所有样式，如style.width，可以设置，注意会影响所有使用该规则的元素；
type：样式表始终是1，IE不支持；
例子：
var sheet = document.styleSheets[0];
sheet.insertRule("div { border: 20px solid yellow;}", 1 ); // 插入的位置很重要，如果插入的样式被后面的样式替换，就不会起作用
// sheet.addRule("div", "border: 20px solid yellow", 1); IE的方式
sheet.deleteRule(1); // 删除索引为1的规则
// sheet.removeRule(1); // IE的方式
