Método Window getComputedStyle()

Objeto Window de JavaScript

getComputedStyle()El método devuelve unaCSSStyleDeclarationObjeto, que contiene todos los valores de atributos CSS del elemento.

El estilo calculado es el que se aplica después de aplicar estilos de múltiples fuentes, y es el estilo real utilizado para mostrar el elemento.

El origen de los estilos puede incluir: hojas de estilo internas, hojas de estilo externas, estilos heredados y estilos predeterminados del 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() puede extraer información de estilo de elementos pseudo (por ejemplo:: after, :: before, :firstfirst, etc.):

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

Referencias relacionadas

Tutoriales de CSS:Tutoriales de CSS

Tutoriales de CSS:Elementos pseudo de CSS

Referencia CSS:Atributos CSS

Referencia de JavaScript:Objeto CSSStyleDeclaration

CSSStyleDeclaration：Método getPropertyValue()

Referencia HTML:Atributos de estilo HTML

Referencia HTML:Etiqueta <style> de HTML

Objeto Window de JavaScript