JavaScript HTML DOM Window getComputedStyle() 方法

Window getComputedStyle() 方法

getComputedStyle()方法获取指定元素的所有实际（计算）CSS属性和值。计算出的样式是在应用来自多个源的“样式”之后实际用于显示元素的样式。样式源可以包括：内部样式表，外部样式表，继承样式和浏览器默认样式。 getComputedStyle()方法返回CSSStyleDeclaration对象。

获取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>

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
getComputedStyle()	9.0+	11.0+	4.0+	5.0+	11.5+

语法

window.getComputedStyle(element, pseudoElement)

参数值

值	类型
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>

尝试一下