‘元素.style.样式名‘获取不到样式，应该使用Window.getComputedStyle()获取正真的样式

一、问题描述

有一次，想通过js获取一个元素的样式的某个属性状态而去执行不同的逻辑代码，结果发现获取的样式总是不对，基本为空。（通过元素.style.样式名的方式去获取。）

通过打印发现，所有的属性均存在，但是值都没有，一开始以为是页面还没有渲染，样式值没有计算才导致获取不到值，后面经过实验，发现也不是(在Vue3中通过nextTick()函数试过)或者说还没有到这一步。而通过JavaScript设置的样式值没有问题，可以获取。

二、发现问题

经过查阅资料发现：使用元素.style.样式名只能获取到元素的内联样式，也就是行内样式，而无法获取到正真计算后的样式。也就是说通过类名设置和外联样式均无法被获取到。

语法：元素.style.样式名
注意：通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

我们通过JavaScript获取元素然后设置的样式也属于行内样式。
通过打印整个元素我们发现，'style'只是元素上的一个属性，他和其他的样式共同作用才能最终决定元素的样子，这当然需要浏览器计算所有的样式后才能决定。

所以当我们通过元素.style.样式名去获取样式时，只是获取到元素身上style属性的所拥有的样式，这或许不会符合我们的期望。

三、解决(Window.getComputedStyle())

使用：

Window.getComputedStyle()

它允许你获取到一个元素的最终计算样式，即该元素在页面上实际呈现的样式。这些样式不仅包括内联样式，还包括外部样式、继承的样式、动态计算的样式（如 display, color 等）以及伪元素的样式

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问。
MND-Window.getComputedStyle()

• 该方法第一个参数必须是一个element元素，返回的对象与从元素的 style 属性返回的对象具有相同的类型，并且从getComputedStyle返回的对象是只读的。

• 第二个参数可选，为要匹配的伪元素的字符串,主要用于获取伪元素的样式。注意如果你只需要获取普通元素的样式，这个参数应该不填或者填null。如：获取某个元素的::after getComputedStyle(element, "::after")。

使用Window.getComputedStyle()就可以通过JavaScript去获取当前元素的所有样式了，如果你的样式是变化的，而没有获取到正确的样式，那么此时才应该考虑获取时机是否正确。

还有一点需要注意的是：window.getComputedStyle 会返回计算后的所有样式，这会迫使浏览器更早的进行样式计算，这可能会让浏览器做不少多余的的工作，尤其是当你在大规模的 DOM 操作或动画过程中频繁调用时。所以为了避免不必要的性能问题，最好避免在频繁的动画或循环中多次调用 getComputedStyle。