Window getComputedStyle() -Methode

JavaScript Window-Objekt

getComputedStyle()Die Methode gibt eineCSSStyleDeclarationEin Objekt, das die Werte aller CSS-Attribute des Elements enthält.

Der berechnete Stil ist der Stil, der nach Anwendung der "Styles" aus mehreren Quellen tatsächlich zum Anzeigen des Elements verwendet wird.

Die Stylesquelle kann umfassen: interne Stylesheets, externe Stylesheets, vererbte Styles und Standard-Stile des Browsers.

可以通过CSSStyleDeclaration对象提供的方法或使用CSS属性名称建立索引来访问各个CSS属性值。

语法：

window.getComputedStyle(element, pseudoElement)

var heading = document.getElementsByTagName("h"1')[0];
var x = window.getComputedStyle(heading, null).getPropertyValue("color");

浏览器兼容性

表格中的数字指定了完全支持getComputedStyle()方法的第一个浏览器版本：

参数值

技术细节

更多实例

在此示例中，我们为<p>元素设置样式，然后使用getComputedStyle()检索这些样式，并将其打印到<p>的文本内容中：

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: '　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+= '<br>line-height: '　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+= '<br>padding: '　+　compStyles.getPropertyValue('padding');

从元素获取所有计算出的样式：

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
for (let i = 0; i < compStyles.length; i++) {　
prop = compStyles.item(i);
txt　+= prop　+　" = "　+　compStyles.getPropertyValue(prop)　+　"<br>";
}

getComputedStyle() kann Stilinformationen aus Pseudo-Elementen extrahieren (z.B.:: after,:: before, :firstfirst usw.):

var div = document.getElementsByTagName("div")[0];
var x = window.getComputedStyle(div, "first-letter").getPropertyValue("font-size");

Zusammenhängende Referenzen

CSS-Tutorial:CSS-Tutorial

CSS-Tutorial:CSS-Pseudo-Elemente

CSS-Referenz:CSS-Attribute

JavaScript-Referenz:CSSStyleDeclaration-Objekt

CSSStyleDeclaration:getPropertyValue()-Methode

HTML-Referenz:HTML-Stil-Attribute

HTML-Referenz:HTML <style>-Markierung

JavaScript Window-Objekt