Método Window getComputedStyle()

Objeto Janela do JavaScript

getComputedStyle()O método retorna umaCSSStyleDeclarationObjeto, que contém os valores de todas as propriedades CSS do elemento.

O estilo calculado é o estilo realmente utilizado para exibir o elemento após a aplicação de estilos provenientes de várias fontes.

As fontes de estilo podem incluir: folhas de estilo internas, folhas de estilo externas, estilos herdados e estilos padrão do navegador.

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

语法：

window.getComputedStyle(element,　pseudoElement)

var　heading　=　document.getElementsByTagName("h1")[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() pode extrair informações de estilo de elementos pseudo (por exemplo:: after,:: before, :firstfirst, etc.):

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

Referências Relacionadas

Tutorial CSS:Tutorial CSS

Tutorial CSS:Elementos Pseudo do CSS

Referência CSS:Propriedades CSS

Referência do JavaScript:Objeto CSSStyleDeclaration

CSSStyleDeclaration：Método getPropertyValue()

Referência HTML:Propriedades de Estilo HTML

Referência HTML:Marcador <style> do HTML

Objeto Janela do JavaScript