The following code shows how to Get all the computed styles from an element: - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window

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

Description

The following code shows how 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(){/* ww w.j  ava  2 s  .  co 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