首先要認識一點: dom元素的style對象和dom元素的css樣式表兩者是獨立的,沒有任何關(guān)系.
譬如我在css中給元素設(shè)置一個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],賦值過的內(nèi)聯(lián)樣式可以通過索引來訪問key.順序也是內(nèi)聯(lián)樣式在前,通過js賦值的樣式在后.
兼容性暫時未知.
