CSS样式信息库

问题描述:

有没有人知道一个好的JavaScript库来获取DOM中给定元素的原始(即不计算)风格?换句话说,可以用来在Firebug的样式选项卡中生成结果。像Firebug一样,它应该考虑CSS的继承,快捷属性和所有其他细微差别。CSS样式信息库

+1

这里不是一个聪明人,我没有使用它,但[firebug lite](http://getfirebug.com/firebuglite)是所有javasript是不是?那是否符合你的要求? – 2010-06-03 10:28:33

+0

当smartass变得有用的时候没什么问题! :)这是一个很好的(也是非常明显的)想法 - 我会检查一下源代码。干杯。 – 2010-06-03 10:52:56

基础上的评论,你可能有兴趣在一个不错的Firebug的精简版bookmarkmarklet链接:

http://www.latentmotion.com/how-to-use-firebug-in-ie6-and-all-other-browsers/

才找到萤火虫精简版,我开始了我自己的定制版本:

http://latentmotion.com/jquery-bookmarklet/ (注意:点击“Reveal Box Boundaries”,然后点击页面上的html标签,你会看到样式属性出现在右边,也可以用作书签)

为了完成上述书签,我用(链接和数组):

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"]; 

如果有人有更好的办法知道,我很感兴趣,也听吧:)

+0

这是有趣的东西,虽然我的问题的主要观点是声明与计算方面。最好的方法似乎是编写一个CSS解析器,并处理可用的样式表。不幸的是,这似乎并不适合用户代理(或者我猜是用户)样式表。 – 2010-06-07 12:03:59

+0

是的。我在脚本中的下一步是创建一个包含所有html元素的iframe,然后获取它们的样式,然后针对具有焦点的dom元素的样式进行差异化。如果有更好的方法,我也很想知道它是什么。 – Matrym 2010-06-07 19:32:12