JS获取元素属性

By | 2022-04-25
阅读次数: 
getComputedStyle(element).property

如获取颜色

getComputedStyle(header).color

header是选择器

element.style.property gets only CSS properties assigned directly on the element. To get the actual property value no matter where it was assigned (external stylesheet or inline) use window.getComputedStyle(element).property, where element is a reference to your element.

MDN详细说明

摘要

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

语法

<pre class="syntaxbox notranslate">let <em>style</em> = window.getComputedStyle(<em>element,</em> [<em>pseudoElt</em>]);
</pre>

element 用于获取计算样式的Element。pseudoElt 可选指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。注意：在Gecko2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)之前版本，参数pseudoElt是必要的。如果为null，则不指定其他主要浏览器必须指定此参数。Gecko已经更改为匹配其他浏览器的行为。。

返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。