深入理解JavaScript页面元素的style和getComputedStyle

用JavaScript给页面元素设置样式

平时大家在实际开发的过程中，如果要使用原生JavaScript给页面元素加样式，一般会用element.style.property的语法来给元素设置样式。

其中，element是一个页面元素，可以通过如document.getElementById的方法来获取到，element.style是一个JavaScript对象，这个对象的属性可读可写，这里要指出的是，element.style实际上是元素的行内样式，也就是在HTML中像下面这样给元素加的样式：

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

换句话说，用CSS给元素加的样式，element.style是获取不到的！可以参考下面这个例子：

<div id="example" style="color: red">I'm example</div>

#example {
  font-size: 2rem;
}

const example = document.getElementById('example');
console.log(example.style.fontSize); // ''
console.log(example.style.color); // 'red'

运行效果：

但在页面中，文字显示为红色，且大小为2rem，行内样式和CSS样式都被应用于元素本身，可以点击这里自己动手试试看。

有人可能注意到了，上面这个例子中example.style.fontSize打印的结果是''空字符串而不是undefined，实际上example.style有非常多的属性，只要是可以设置在一个页面元素上的属性，都可以在example.style中被访问到，但是只要这些属性没有在行内样式中被声明，那么通过example.style.property访问的结果一律都是空字符串''。

深入element.style原理

让我们更进一步来了解一下在JavaScript中通过element.style给元素设置样式的原理。

当我们给element.style.property赋值来设置样式时，实际上等同于给这个DOM元素加了一个行内样式。那么为什么这个行内样式能覆盖在CSS中声明的样式呢？这就涉及到了CSS选择器优先级的问题，行内样式的优先级是大于用CSS声明的样式的，因此覆盖了在CSS中声明的样式，想了解关于CSS选择器优先级的内容，可以参考我的另外一篇博文：CSS选择器优先级详解

不过，有一个情况非常特殊，那就是CSS中的!important关键字，包含这个关键字的CSS样式优先级最高，甚至高于行内样式，因此在JavaScript中使用element.style.property给一个包含!important关键字的属性设置样式是无效的，参考这个例子：

<p id="example">I cannot be changed</p>

#example {
  color: red !important;
}

const example = document.getElementById('example');
example.style.color = 'blue';
console.log(example.style.color); // 'blue'

运行效果：

虽然我尝试用JavaScript给元素设置颜色，但是由于在CSS中有!important关键字，在JavaScript中设置的样式由于优先级不够没有应用上去，文字依然呈现红色，在实际开发中，不推荐开发者在CSS中使用!important关键字，容易导致问题，上面的例子可以可以点击这里查看效果。

用window.getComputedStyle获取实时样式

在实际开发的过程中有时我们需要获取一个页面元素的实时样式，这时候element.style就没有意义了，我们需要用到另外一个函数，就是window.getComputedStyle。这是BOMwindow的一个方法，它有两个参数：

• element[必须]：这个跟element.style中的element是同一个东西，也就是用如document.getElementById来获取到的元素。
• pseudoElt[可选]：这个是用来指定伪元素的，如果你想要获取的是某个元素的伪元素，如::before，::after，就要在这个参数中输入字符串'::before'或者是'::after'，如果你要指定的就是元素本身，那就可以省略或者输入null，不过在某些早期浏览器版本中这个参数是必须的，所以最好的操作是永远输入两个参数，在不指定伪元素的情况下把第二个参数设置为null。

通过这个函数，我们可以获取到一个页面元素的实时样式，返回值是一个JavaScript的对象，其中包含了一个页面元素可以具备的所有属性，每个属性都是当前页面中的实时样式，如果涉及到长度单位，一律都会转换成以px为单位的数值，如果这个样式没有被定义过，就使用页面的默认样式，例如：

<div id="example">I'm computed</div>

#example {
  position: relative;
  left: 50%;
}

const example = document.getElementById('example');
const style = window.getComputedStyle(example, null);
console.log(style.left); // 952px
console.log(style.fontSize); // 16px

运行效果：

上面的例子中我以百分比为单位在CSS中定义了文字离父元素（实际上是body）左边的距离，在使用window.getComputedStyle获取样式后，得到了952px的结果，这个结果跟浏览器的窗口大小有关，在不同设备上结果是不同的。

而在CSS和HTML中我都没有定义字体大小，所以这里的字体大小使用了浏览器默认设置，为16px，仍然可以被获取到，同理通过这个函数也可以获取到其他所有没有在HTML和CSS中显式定义的元素样式，可以点击这里动手试试。

在实际的开发中，我们可以根据需要灵活地使用element.style和window.getComputedStyle，重要的是明白它们之间的区别。

参考

1. MDN web docs