DOM与元素节点内联样式

获取、设置及移除单个内联 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);

  // set
  divStyle.backgroundColor = 'red';

  // get
  console.log(divStyle.backgroundColor);

  // remove 
  divStyle.backgroundColor = '';

  // style 对象是个 CSSStyleDeclaration 对象，它不仅提供了单个 CSS 属性的访问方式
  // 也提供 setProperty()、getPropertyValue()以及removeProperty() 方法

  // set
  divStyle.setProperty('height', '200px');

  // get
  console.log(divStyle.getPropertyValue('height'));

  // remove
  divStyle.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];
}