关于dom元素style对象的误区

首先要认识一点: dom元素的style对象和dom元素的css样式表两者是独立的,没有任何关系.
譬如我在css中给元素设置一个color属性,访问node.style.color, 会显示空字符串.
我之前一直把这两者混为一谈了.
看例子:

 <div style="color: aqua;line-height: 24px" class="demo">
    <p>hello world</p>
  </div>

  .demo {
    background-color: bisque;
    font-size: 16px;
  }

<script>
  var node = document.querySelector('.demo')
  console.log(node.style.color) // aqua
  console.log(node.style.backgroundColor) // ''
  console.log(node.style)
  console.log(node.style[0])  // 'color'
  console.log(node.style.cssText)  // 'color: aqua; line-height: 24px;'
  console.log(node.style.fontSize) // ''
</script>

比较有意思的是node.style[0],赋值过的内联样式可以通过索引来访问key.顺序也是内联样式在前,通过js赋值的样式在后.
兼容性暂时未知.