Use getComputedStyle to Get all the computed styles from an element - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window getComputedStyle

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

Description

Use getComputedStyle to Get all the computed styles from an element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>


<p><button onclick="myFunction()">Test</button></p>

<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>

<p><span id="demo"></span></p>

<script>
function myFunction(){//from  w ww  . j  a  v a  2  s .c  o m
    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>

</body>
</html>

Related Tutorials