例
獲取計算(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> 試一試»