Window getComputedStyle() Method - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window getComputedStyle

  1. HOME
  2. Javascript
  3. Browser Object Model
  4. Window getComputedStyle

Description

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>
<html>
<head>
<style>
div::first-letter {
    font-size: xx-large;
}
</style>/*from w w  w.j a  v a 2 s.c  o m*/
</head>
<body>


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

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

</body>
</html>

Related Tutorials