Philip

Philip's blog

0%

element.style vs window.getComputedStyle

Posted on Edited on In
Symbols count in article: 627 Reading time ≈ 2 mins.

element.style vs window.getComputedStyle

这两种方式都可以获取元素的样式，但是它们之间有什么区别呢？首先让我们看看在前端开发中，有哪几种方式可以设置样式。

inline style(内联样式)

内联样式是指直接在元素上设置样式，比如下面的代码中，<div>元素上设置了style属性，这就是内联样式。

1
<div style="color: red;">Hello World!</div>

inner style(内部样式)

内部样式是指在<head>标签中添加<style>标签，然后在<style>标签中添加样式，比如下面的代码中div {color: red;}就是内部样式。

1
2
3
4
5
6
7
<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>

external stylesheet(外部样式表)

外部样式表是指将样式单独放在一个文件中，然后在<head>标签中使用<link>标签引入，比如下面的代码中，<link>标签引入了style.css这个文件，这就是外部样式表。

1
2
3
4
<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>
1
2
3
4
/* style.css */
div {
  color: red;
}

element.style 和 window.getComputedStyle的区别

再来看element.style和window.getComputedStyle的区别：

  1. element.style只能获取内联样式，
  2. window.getComputedStyle可以获取内联样式、内部样式和外部样式表。

所以大多数情况下，我们都是使用window.getComputedStyle来获取元素的样式。

示例代码

下面的代码中，style.css文件中设置了外部样式表。

1
2
3
4
5
6
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="my-div">Hello World!</div>
</body>
1
2
3
4
/* style.css */
div {
  color: blue;
}
1
2
3
const div = document.getElementById("my-div");
console.log(div.style.color); // "" - empty string. 因为div元素上没有设置内联样式。
console.log(window.getComputedStyle(div).color); // rgb(0, 0, 255)

可以看到，element.style只能获取内联样式，而window.getComputedStyle可以获取内联样式、内部样式和外部样式表。

应用场景

不同的场景可以使用不同的方式来获取元素的样式：

  • 如果你只需要获取内联样式，可以使用element.style。
  • 如果想直接修改样式，可以使用element.style。
  • 如果你需要获取内联样式、内部样式和外部样式表，可以使用window.getComputedStyle。

总结

  1. 修改样式的时候，最好用element.style，因为它的优先级最高。
  2. 获取样式的时候，最好用window.getComputedStyle，因为它可以获取所有的样式。

需要注意的是：如果使用window.getComputedStyle获取样式，可能会引发浏览器重绘。因为它获取的总是最终计算过的样式，如果获取样式时，浏览器尚未完成渲染，那么必然会引发重绘。

References