Getting CSS Values from elements

Question

I need to use the web storage api to store style changes of the elements on one page. I actually have no clue how to do this but I thought I'd start by getting the CSS attribute that's been changed and storing it in an array. Im trying to follow what's going here and tailoring it to my problem.

this is what i've tried in order to get the values but im not sure if it's correct:

function newItem(){
    var bgImg = document.getElementsByTagName('body').bgImg[0].style.getPropertyValue('background');
    var wideScreen = getElementById('sidebar').style.getPropertyValue('display');
    var playerColor = getElementById('video_container').style.getPropertyValue('background-color');     
    }

I am not sure if the code i've written above grabs the information I need.

Answer 1

You can use getComputedStyle().

getComputedStyle() gives the final used values of all the CSS properties of an element.

var element = document.getElementById('sidebar'),
    style = window.getComputedStyle(element),
    display = style.getPropertyValue('display');


var element = document.getElementById('video_container'),
    style = window.getComputedStyle(element),
    bg = style.getPropertyValue('background-color');