JavaScript Window getComputedStyle() 方法
实例
获取 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>
亲自试一试 »
<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>
页面下方有更多实例。
定义和用法
getComputedStyle() 方法用于获取指定元素的 CSS 样式。
获取的样式是元素在浏览器中最终渲染效果的样式。
样式源可以包括：内部样式表、外部样式表、继承样式和浏览器默认样式。
getComputedStyle() 方法返回 CSSStyleDeclaration 对象。
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
语法
window.getComputedStyle(element, pseudoElement)
参数值
| 参数 | 描述 |
|---|---|
| element | 必需。要获取其样式的元素 |
| pseudoElement | 可选。要获取的伪元素 |
技术细节
| 返回值: | 包含元素的 CSS 声明块的 CSSStyleDeclaration 对象。 |
|---|
更多实例
实例
从元素中获取所有的样式:
<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>
亲自试一试 »
<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>
亲自试一试 »
<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>
