DOM Enlightenment Book

by peroli

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div style="background-color:green;border:1px solid purple;"></div>

CSS

div{
    background-color:red;
    border:1px solid black;
    height:100px;
    width:100px;
}

JavaScript

var div = document.querySelector('div');

//logs rgb(0, 128, 0) or green, this is an inline element style
console.log(window.getComputedStyle(div).backgroundColor);

//logs 1px solid rgb(128, 0, 128) or 1px solid purple, this is an inline element style
console.log(window.getComputedStyle(div).border);

//logs 100px, note this is not an inline element style
console.log(window.getComputedStyle(div).height);

//logs 100px, note this is not an inline element style
console.log(window.getComputedStyle(div).width);