La méthode Window getComputedStyle()

Objet Window JavaScript

getComputedStyle()La méthode renvoie uneCSSStyleDeclarationL'objet, qui contient les valeurs des attributs CSS de l'élément.

Le style calculé est celui utilisé pour afficher l'élément après application des styles provenant de multiples sources.

Les sources de styles peuvent inclure : les feuilles de style internes, les feuilles de style externes, les styles hérités et les styles par défaut du navigateur.

可以通过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 = &39;font-size: &39;　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+= &39<br>line-height: &39;　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+= &39<br>padding: &39;　+　compStyles.getPropertyValue('padding');

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

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

getComputedStyle() peut extraire des informations sur les styles des pseudo-éléments (par exemple:: after,:: before,：firstfirst, etc.) :

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

Références associées

Tutoriel CSS :Tutoriel CSS

Tutoriel CSS :Élément pseudo-CSS

Référence CSS :Propriétés CSS

Référence JavaScript :Objet CSSStyleDeclaration

CSSStyleDeclaration :Méthode getPropertyValue()

Référence HTML :Propriétés de style HTML

Référence HTML :Balise <style> HTML

Objet Window JavaScript