样式的优先级
样式属性通过四种方式可以被添加，他们的优先级从高到低依次为：
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上原有的所有样式。
版权声明：本文为博主原创文章，未经博主允许不得转载。