Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can first get all styles, then do whatever you want, and then later get all styles, and then compare the two arrays. Here's something to get you started:</p> <p>An array of all styles:</p> <pre><code> 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"]; </code></pre> <p>Here's a jQuery loop that spits out the values after doing a comparison with another's values (in my case, $other was another dom element, but the code's probably similar enough. You will need to edit this slightly:</p> <pre><code> // Now we loop through each property, and report those defined $.each(allStyles, function(key, value){ if ($this.css(value) !== undefined){ if (($other.css(value) !== undefined) &amp;&amp; ($this.css(value) !== $other.css(value))){ $("#jsStylesA").append("&lt;li&gt;&lt;span class='property'&gt;"+value+"&lt;/span&gt;: &lt;span class='value'&gt;"+$this.css(value)+"&lt;/span&gt;&lt;/li&gt;"); } else { $("#jsStylesB").append("&lt;li&gt;&lt;span class='property'&gt;"+value+"&lt;/span&gt;: &lt;span class='value'&gt;"+$this.css(value)+"&lt;/span&gt;&lt;/li&gt;"); } } }); </code></pre> <p>Do you think you can take it from here?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload