How to read from CSS files with jQuery

Question

Ok, I have a HTML page with jQuery included.

I have a CSS file with a good load of lines in, I would like to read all styles for a given element from the external CSS file... Not the inline styles...

I have the following code (which looks like it should work...):

var styleProperties= {};
var getCssProperties = ['width', 'margin', 'height']; 

for (c=0;c<=returnStyleProps.length;c++) {
    styleProperties[returnStyleProps[c]] = $('div#container').css(returnStyleProps[c]);
    alert(styleProperties);
}
alert(styleProperties);

But this only seems to alert:

"[Object Object]"

[edit] Please...? I'm really quite stuck, nothing seems to work :( [/edit]

Answer 1

to start, please try console.log(styleProperties); and look at what the object holds in firebug console...

Answer 2

Using firebug put a breakpoint on the code and you will be able to inspect the properties of said object. That should let you know what it is and if it is what you want.

Answer 3

var cs = {};
var elem = $('h1')[0];
for(var s in elem.style)
{
    // console.log(s + typeof(s));
    var v = $(elem).css(s);
    if (v && v != '')
    {
        cs[s] = v;
    }
}

for(var s in cs)
{
    console.log(s + ': ' + cs[s]);
}

please run in firebug if you have h1 element on the page and jQuery is used... just a rough idea though...