元素样式控制

样式的优先级

样式属性通过四种方式可以被添加，他们的优先级从高到低依次为：

1.        Inline Styles；

2.        Style Sheet Rules；

3.        HTML Attributes（比如fill,height, width等）；

4.        HTML标签默认定义；

通用

Element.style

Element.style操作的是元素的styleattribute指定的样式（inline styles）。

Window.getComputedStyle()

getComputedStyle方法接受两个参数，第一个是要查询的元素，第二个参数可选，值是表示pseudo-element的字符串。getComputedStyle的优势就是可以获取pseudo元素的样式，而style, currentStyle和runtimeStyle都不行。但getComputedStyle返回的所有样式都是只读的。

IE

Element.currentStyle

currentStyle是由样式表单、inline样式和HTMLattributes决定的，是应用的样式设置的值，但并不能反映获取值时渲染所采用的值。比如样式设置为"color:red; display:none"，将返回currentStyle.color为red，尽管元素并没在页面上渲染。也就是说，currentStyle不受渲染与否的约束。

特点：

• IE元素独有，Firefox和Chrome没有；
• currentStyle保存的是采用的样式设置，而不是最终值，比如"color:green"，currentTyle.color返回的依然是green，而不是#00FF00；
• currentStyle是异步的，因此页面还在加载的时候获取的值可能是过去的值，最好等body已经load成功之后再获取。

Element.runtimeStyle

Element.runtimeStyle表示的是由全局样式表单、inline样式和HTMLattributes指定的元素级联样式。

特点：

• IE元素独有，Firefox和Chrome没有；
• runtimeStyle保存的是采用的样式设置，而不是最终值，比如"color:green"，currentTyle.color返回的依然是green，而不是#00FF00；
• 修改runtimeStyle会影响currentStyle，但不会影响style对象；

Style, runtimeStyle和currentStyle的关系

style和runtimeStyle在功能上是相等的；修改style或runtimeStyle，都会影响currentStyle。但是，单独修改style不会影响runtimeStyle，同理，单独修改runtimeStyle也不会影响style。

虽然MSDN认为runtimeStyle和style等价，优先级相同，经过IE7，IE8，IE9，IE10，IE11实际测试后发现，一旦通过runtimeStyle设置某个样式属性之后，再通过style对象操作这个属性就不再起作用。因此，可以等同认为runtimeStyle的优先级比style高。

Window.getComputedStyle()

在IE中，这个方法其实返回的就是currentStyle。

从IE9开始支持这个方法，IE8和低于IE8的IE都不支持。

Firefox

window.getDefaultComputedStyle()

这是Firefox独有的方法，与getComputedStyle()的主要区别是getDefaultComputedStyle只返回用户代理和用户自定义的原样式，元素渲染之后，用户又重新编辑的样式被忽略。getComputedStyle才是元素现有的样式。

应用

获取元素的当前样式属性

1.        首先判断window有没有getComputedStyle方法，如果有，就用这个方法获取；一般来说，调用方式为document.defaultView.getComputedStyle()。

2.        如果没有getComputedStyle方法，针对IE，应该使用currentStyle。

去掉style所有样式

element.removeAttribute("style")。

同时修改多个样式属性

Element.style.cssText ='color:red;background-color:blue;border:5px solid black;';

这样写的问题是会删除掉style上原有的所有样式。