Is anyone aware of a good javascript library to obtain original (i.e. not computed) style for a given element in the DOM? In other words, something one could use to produce the results in Firebug's style tab. Like Firebug, it should take into account inheritance, shortcut properties, and all the other nuances of CSS.
+1
A:
Based on the comments, you might be interested in a nice firebug lite bookmarkmarklet link:
http://www.latentmotion.com/how-to-use-firebug-in-ie6-and-all-other-browsers/
Before I found firebug lite, I got started on my own custom version:
http://latentmotion.com/jquery-bookmarklet/
(Note: Click "Reveal Box Boundaries" and then click on an html tag on the page. You will see style properties appear on the right. It can also be used as a bookmarklet)
To accomplish the above bookmarklet, I used (link and array):
http://www.latentmotion.com/jquery-bookmarklet/example-jquery-bookmarklet.js
var allStyles = ["azimuth","background" ,"backgroundAttachment","backgroundColor","backgroundImage","backgroundPosition","backgroundRepeat","border","borderBottom","borderBottomColor","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderLeft","borderLeftColor","borderLeftStyle","borderLeftWidth","borderRight","borderRightColor","borderRightStyle","borderRightWidth","borderSpacing","borderStyle","borderTop","borderTopColor","borderTopStyle","borderTopWidth","borderWidth","bottom","captionSide","clear","clip","color","content","counterIncrement","counterReset","cssFloat","cue","cueAfter","cueBefore","cursor","direction","display","elevation","emptyCells","font","fontFamily","fontSize","fontSizeAdjust","fontStretch","fontStyle","fontVariant","fontWeight","height","left","letterSpacing","lineHeight","listStyle","listStyleImage","listStylePosition","listStyleType","margin","marginBottom","marginLeft","marginRight","marginTop","markerOffset","marks","maxHeight","maxWidth","minHeight","minWidth","orphans","outline","outlineColor","outlineStyle","outlineWidth","overflow","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","page","pageBreakAfter","pageBreakBefore","pageBreakInside","pause","pauseAfter","pauseBefore","pitch","pitchRange","playDuring","position","quotes","richness","right","size","speak","speakHeader","speakNumeral","speakPunctuation","speechRate","stress","tableLayout","textAlign","textDecoration","textIndent","textShadow","textTransform","top","unicodeBidi","verticalAlign","visibility","voiceFamily","volume","whiteSpace","widows","width","wordSpacing","zIndex"];
If anyone knows of a better way, I'm interested in hearing it too :)
Matrym
2010-06-07 05:21:06
That's interesting stuff, although the main point about my question was the declared versus computed aspect. The best method appears to be to write a CSS parser, and process the available stylesheets. Unfortunately, this doesn't appear to cater for user-agent (or, I guess, user) stylesheets.
Bobby Jack
2010-06-07 12:03:59
Yeah. My next step in the script was to create an iframe with all html elements in it, then get their stylings, and then do a diff against the styles of the focused dom element. If there's a better way, I too would love to know what it is.
Matrym
2010-06-07 19:32:12