JS Storage 对象 JavaScript Window 对象

Window getComputedStyle() 方法

JavaScript Window 对象

getComputedStyle()方法返回一个CSSStyleDeclaration对象，该对象包含元素的所有CSS属性的值。

计算出的样式是在应用了来自多个来源的“样式”之后，实际用于显示元素的样式。

样式源可以包括：内部样式表，外部样式表，继承的样式和浏览器默认样式。

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

语法：

window.getComputedStyle(element, pseudoElement)

示例

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

测试看看‹/›

浏览器兼容性

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

方法
getComputedStyle()	11	4	11.5	5	9

参数值

参数	描述
element	要为其获取计算样式的元素
pseudoElement	（可选）一个字符串，指定要匹配的伪元素。对于真实元素，省略（或为null）。

技术细节

返回值：	一个CSSStyleDeclaration对象，包含元素的CSS声明块，当元素的样式更改时，该对象会自动更新。

更多实例

在此示例中，我们为<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()可以从伪元素中提取样式信息（例如:: after，:: before，：firstfirst等）：

示例

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

测试看看‹/›

相关参考

CSS教程：CSS教程

CSS教程：CSS伪元素

CSS参考：CSS属性

JavaScript参考：CSSStyleDeclaration对象

CSSStyleDeclaration：getPropertyValue()方法

HTML参考：HTML样式属性

HTML参考：HTML <style>标记

JavaScript Window 对象

JS Storage 对象 JavaScript Window 对象