Javascript: Get typed CSS values NOT computed values

Question

Obviously it can be done since Firebug does, but I wasn't sure if they were doing a lot of processing on the CSSDeclarations or if there was something in the DOM that I am missing, but I would like to grab the the TYPED style of an element or stylesheet and not the cssText that the DOM seems to be giving back.

An example would be the border. If my element has border:1px solid #000, the DOM gives me back

border-top-width:1px;
border-right-width-value:;
border-right-width-ltr-source:;
border-right-width-rtl-source:;
border-bottom-width:1px;
border-left-width-value:;
etc.....

All I really want back is what I typed, which was border:1px solid #000.

If anyone has any thoughts to that regards, it would be appreciated.

Here are the DOM2 specs for CSS: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule That's where I'm not sure if I'm missing something, of if I should be looking elsewhere.

Here is the code I wrote, seems to work fine, but, like I said, right now it's only giving back browser rendered styles and computed styles. NO NEED to look at code. I was just looking for suggestions overall. I just posted code to help someone out if they were looking for something to start with....

bg.fn.cssNavigator = function(){
var el = bg(this)[0]; //Only take first element.
var context = bg(this).context; //What document are we looking at?
if(!document.getElementById('plugins-bg_css_navigator-wrapper')){
    jQuery("body").append('<div id="plugins-bg_css_navigator-wrapper"><div id="plugins-bg_css_navigator-css"></div></div>');
}
var t = '';
t = t+'<div>Inline Style</div><div>';
if(el.style){
    var els = el.style;
    for(var i=0; i<els.length; i++){
        var s = els[i];
        t = t+s+':'
        t = t+window.getComputedStyle(el, null).getPropertyValue(s)+';<br />';      }
}
t = t+'</div>';
t = t+'<div>Computed Style</div><div>';
var cs = window.getComputedStyle(el, null);
for(var i = 0; i<cs.length; i++){
    //if(typeof cs[i] === "function"){ break; }
    t = t+cs[i]+':'+cs.getPropertyValue(cs[i])+'<br />';    
}
t = t+'</div>';
var ssc = context.styleSheets;
for( var i in ssc ){
    var isTab = false;
    if(undefined !== jQuery(ssc[i].ownerNode).attr("href")){
        t = t+'<div>'+jQuery(ssc[i].ownerNode).attr("href")+'</div>';
        isTab = true;
    }else if(undefined !== ssc[i].ownerNode){
        t = t+'<div>Current File</div>';
        isTab = true;
    }
    if(isTab){
        t = t+'<div stylesheet="'+i+'">';
        try{
            var sscr = ssc[i].cssRules;
            for( var j in sscr ){
                if(undefined !== ssc[i].cssRules[j].cssText){
                    t = t+ssc[i].cssRules[j].cssText+'<br />';
                }
            }
        //If we get an error, then all the stylesheets are not loaded, let's exit and try again in 100 milliseconds
        }catch(e){ setTimeout( function(){ bg(el, context).cssNavigator(); }, 100 ); return false; }
        t = t+'</div>';
    }
}
jQuery("#plugins-bg_css_navigator-css").html(t);
};

EDIT########################### Actually, I was mistaken about Firebug. It seems that the actual plugin for Firefox does seem to do a better job about handling that stuff, but if you are using Firebug Lite, you just get the rendered styles.

Answer 1

I actually found the answer I was looking for.

cssText is what I was looking for. It's noted here: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

The reason it wasn't working is because I was trying it when the page loaded, but it was being fired before the actual rendering occured, so it was returning undefined.

I was doing some major revisions and tried it after the page finished loading completely, and it showed up.

Yay!