element.style
- 支持读和写,获取的是元素style属性上的样式(行内样式)
window.getComputedStyle
- 只支持读,获取的是渲染后最终的样式
- IE8以下不支持window.getComputedStyle,使用currentStyle
- window.getComputedStyle() 有两个参数,元素和伪类。当不查询伪类元素的时候第二个参数可以不填,或者传入 null。
1 <style> 2 #box { 3 width: 100px; 4 background-color: #bfa; 5 } 6 style> 7 <div id="box" style="height: 100px;"> 8 div> 9 <script> 10 let box = document.querySelector("#box"); 11 console.log(box.style.height);//100px 12 console.log(getComputedStyle(box).backgroundColor);//rgb(187, 255, 170) 13 script>