Get the computed style and omit defaults

Question

I\'m trying to get the current runtime style of an element and filter out properties that have default values. For example, with markup like this:

Answer 1

You can use, e.g:

window.getComputedStyle(document.getElementById('bar'))

This will return an object containing all the computed styles for the element with the id 'bar'.

So, for example you could do:

var styles = window.getComputedStyle(document.getElementById('bar'));
styles = "background-color:" + styles['background-color'] + ";color:" + styles['color'] + ";font-size:" + styles['font-size'] + ";";
console.log(styles);

Note that color values will be returned in RGBA format.

Demo Fiddle