element.style 和 window.getComputedStyle的区别

10/14/2020 CSS3Style

# 文章目录

# 一、读写支持

element.style 支持读写
window.getComputedStyle 只支持 读

注意:window.getComputedStyle IE8+
IE8 及以下:currentStyle

# 二、读写范围

element.style 读取的只是元素的内联样式,即写在元素的 style 属性上的样式;

getComputedStyle 读取的样式是最终样式包括内联样式嵌入样式外部样式
示例:

let my_div = document.getElementById("myDiv");
let style = window.getComputedStyle(my_div, null);
1
2

# 三、使用方法

大多数情况下 通过使用 getComputedStyle 读取样式,通过 element.style 修改样式

window.getComputedStyle() 首先是有两个参数,元素和伪类。第二个参数不是必须的,当不查询伪类元素的时候可以忽略或者传入 null。

这两个方法 返回的对象键名是 css 的驼峰式写法:
background-color \-> backgroundColor。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div id="one" style="font-size: 26px;">111</div>
    <script>
      let one = document.querySelector("#one");

      console.log(one.style.fontSize); // 26px
      console.log(window.getComputedStyle(one).fontSize); //26px

      console.log(one.style.backgroundColor); // 空
      console.log(window.getComputedStyle(one).backgroundColor); //rgb(255, 192, 203)

      // 通过上面的测试,可以发现 elemen.style 方式真的不能读取 除 内联样式以外的样式
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

输出:
在这里插入图片描述
通过上面的测试,可以发现 elemen.style 方式真的不能读取 除 内联样式以外的样式

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar