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

古城微笑少年丶 2022-04-10 13:22 236阅读 0赞

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

*  用JavaScript给页面元素设置样式
 *  深入\`element.style\`原理
 *  用\`window.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'

运行效果：  
![element.style的效果][element.style]

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

有人可能注意到了，上面这个例子中`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]

不过，有一个情况非常特殊，那就是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'

运行效果：  
![在这里插入图片描述][20190107154331235.png]

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

# 用`window.getComputedStyle`获取实时样式 #

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

*  `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

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

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

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

# 参考 #

1.  [MDN web docs][]

[element.style]: /images/20220330/0de4be018e954311a8f506a97ddfa010.png
[Link 1]: https://codepen.io/dakoala/pen/zyjpGB
[CSS]: https://blog.csdn.net/zyj362633491/article/details/85930739
[20190107154331235.png]: /images/20220330/fece48a41542465b898679ef8bb8f250.png
[Link 2]: https://codepen.io/dakoala/pen/wRjpEV
[getComputedStyle]: /images/20220330/3fbab52b9bf948a6b373b89c35f99d58.png
[Link 3]: https://codepen.io/dakoala/pen/maLXKJ?editors=1111
[MDN web docs]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle