element.style和window.getComputedStyle的区别

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>

 

上一篇:js 设置和获取 div 样式


下一篇:Dom 操作css