首先要认识一点: 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赋值的样式在后.
兼容性暂时未知.
