JavaScript Window getComputedStyle() Method
Example
Get the computed (actual showing) background color of a 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>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The getComputedStyle() method gets all the actual (computed) CSS property and values of the specified element.
The computed style is the style actually used in displaying the element, after "stylings" from multiple sources have been applied.
Style sources can include: internal style sheets, external style sheets, inherited styles and browser default styles.
The getComputedStyle() method returns a CSSStyleDeclaration object.
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
Syntax
window.getComputedStyle(element, pseudoElement)
Parameter Values
| Parameter | Description |
|---|---|
| element | Required. The element to get the computed style for |
| pseudoElement | Optional. A pseudo-element to get |
Technical Details
| Return Value: | A CSSStyleDeclaration object containing CSS declaration block of the element. |
|---|
More Examples
Example
Get all the computed styles from an element:
<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>
Try it Yourself »
Example
Get computed font size of the first letter in the test div (using pseudo-element):
<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>
Try it Yourself »
