获取、设置及移除单个内联 CSS 属性

每个 HTML 元素都有个 style 属性，可以用来插入针对该元素的内联 CSS 属性。

<div style='background-color:black; height:100px; width:100px'></div>
<script>var divStyle = document.querySelector('div').style;// 输出一个 CSSStyleDeclaration 对象，仅包含该元素的内联样式console.log(divStyle);// setdivStyle.backgroundColor = 'red';// getconsole.log(divStyle.backgroundColor);// remove divStyle.backgroundColor = '';// style 对象是个 CSSStyleDeclaration 对象，它不仅提供了单个 CSS 属性的访问方式// 也提供 setProperty()、getPropertyValue()以及removeProperty() 方法// setdivStyle.setProperty('height', '200px');// getconsole.log(divStyle.getPropertyValue('height'));// removedivStyle.removeProperty('height');</script>

注意： style 对象中的属性名并不含 CSS 属性名中常用的横线。转译非常简单，移除横线并使用驼峰体。其中一个不能直接转换的 CSS 属性是 float，由于 float 是 Javascript 的保留字，因此不能用作属性名。“DOM2级样式”规范规定样式对象上相应的属性名应该是 cssFloat，ff、Safari、opera和chrome都支持这个属性，而 IE 支持的则是 styleFloat。

获取、设置及移除所有内联 CSS 属性

<div style='background-color:black; height:100px; width:100px'></div>
<script>var div = document.querySelector('div'), divStyle = div.style;// 使用 CSSStyleDeclaration 对象的 cssText 属性，和 getAttribute() 与 setAttribute() 方法// 可以用 Javascript 字符串获取、设置及移除 style 属性的整个值（即所有内联 CSS 属性）divStyle.cssText = '';divStyle.cssText = 'background-color:red; height:200px; width: 200px';// ---- div.setAttribute('style', 'background-color:blue; height:100px; width:100px');console.log(div.getAttribute('style'));div.removeAttribute('style');
</script>

使用 getComputedStyle() 获取元素的已计算样式

style 属性值只包含通过 HTML 中的 style 属性定义的 CSS。要获得元素级联包括内联样式后的 CSS（即从内联样式表单，外部样式表单和浏览器样式表单级联），你可以用 getComputedStyle()。该方法提供一个只读的类似 style 的 CSSStyleDeclaration 对象。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":hover")，如果不需要伪元素信息，第二个参数可以为 null。

<style>div {background-color: black;width: 100px;}
</style><div style='background-color:red; height:100px';></div><script>// document.defaultView 在浏览器中即为 window 对象var divStyle = document.defaultView.getComputedStyle(document.querySelector('div'), null);console.log(divStyle.width);  // 100px
</script>

getComputedStyle() 方法遵照 CSS 声明优先级（内联 > style > link），同时它所返回的 CSSStyleDeclaration 对象不能设定任何值，因为它是只读的。

IE 不支持 getComputedStyle() 方法，但它有一种类似的概念，在 IE 中，每个具有 style 属性的元素还有一个 currentStyle 属性，这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式，同样只是可读。

<style>div {background-color: black;width: 100px;}
</style><div id='div'style='background-color:red; height:100px';></div><script>// 我也不知道为啥要用onload，去掉就报错说找不到对象...window.onload = function() {var divStyle = document.getElementById('div').currentStyle;console.log(divStyle.width);  // 100px}
</script>

兼容写法（2016-03-14 add）：

function getStyle(ele, type) {if (window.getComputedStyle) return window.getComputedStyle(ele, null)[type];else return ele.currentStyle[type];
}