Window getComputedStyle() Method - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window getComputedStyle


The getComputedStyle() method gets all the actual CSS property and values of the specified element.

The getComputedStyle() method returns a CSSStyleDeclaration object.

Parameter Values

Parameter Description
element Required. The element to get the computed style for
pseudoElement Optional. A pseudo-element to get

Return Value:

A CSSStyleDeclaration object containing CSS declaration block of the element.

The following code shows how to Get the computed (actual showing) background color of a div:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
div::first-letter {
    font-size: xx-large;
</style>/*from w w  w.j a  v a 2 s.c  o m*/

<p><button onclick="myFunction()">Test</button></p>
<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>

div::first-letter in the test div is: <span id="demo"></span>

function myFunction(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, "first-letter").getPropertyValue("font-size");
    document.getElementById("demo").innerHTML = theCSSprop;


Related Tutorials