Obviously, this can be done since Firebug does this, but I was not sure that they do a lot of processing in CSSDeclarations or if there is something in the DOM, but I would like to capture the TYPED style of the element or stylesheet, and not the cssText that the DOM seems to be returning.
An example is the border. If my element has a border: 1px solid # 000, the DOM returns me
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 need is what I typed, which was the border: 1px solid # 000.
If anyone has thoughts on this, it will be appreciated.
Here are the DOM2 specifications for CSS: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule What I'm not sure, I missed something if I should look elsewhere.
Here is the code that I wrote, it seems to work fine, but, as I said, right now it only returns the styles and computed styles of the browser. NO NEEDS to look at the code. I was just looking for offers in general. I just wrote code to help someone if they are 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 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 made a mistake in Firebug. It seems that the actual Firefox plugin seems to do a better job of handling this stuff, but if you use Firebug Lite, you just get the rendered styles.