例
获取计算(actual showing)的背景一个div的颜色：
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>其结果将是：
The computed background color for the test div is: rgb(173, 216, 230) 试一试» 更多"Try it Yourself"下面的例子。
定义和用法
所述getComputedStyle()方法得到所有的实际(computed) CSS指定元素的属性和值。
计算出的样式是在显示元件，来自多个源的花式已apllied后实际上可以使用的样式。
样式来源包括：内部样式表，外部样式表，继承的样式和浏览器默认样式。
所述getComputedStyle()方法返回一个CSSStyleDeclaration对象 。
浏览器支持
在表中的数字规定，完全支持方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9 | 4 | 五 | 11.5 |
句法
参数值 参数 描述 element 需要。 元素得到的计算样式 pseudoElement 可选的。 伪元素得到
技术细节
返回值： 该元件的含有CSSStyleDeclaration对象CSS声明块。
更多示例
例
获得从一个元素都计算方式：
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> 试一试» 例
获得在测试的div的第一个字母的计算机的字体大小（使用伪元素）：
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> 试一试»