Getting all the CSS associated with an element

Question

How to get all the CSS associated with the element? Here there is a solution available here which is based on the window.getComputedStyle function which will return the value that is generated by the browser (after computing) and it is completely browser specific. And also it is producing very long code. For eg.,,

#check {
 background: orange;
 padding: 2em; 
}

will retrieve the following code in chrome,

background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 165, 0); background-image: none; background-origin: padding-box; background-size: auto; border: 0px none rgb(0, 0, 0); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-top-left-radius: 0px; border-top-right-radius: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; height: 20px; image-rendering: auto; left: auto; letter-spacing: normal; line-height: normal; list-style: disc outside none; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; opacity: 1; orphans: auto; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-wrap: normal; overflow: visible; padding: 32px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; pointer-events: auto; position: static; resize: none; right: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: optimizelegibility; text-shadow: none; text-overflow: clip; text-transform: none; top: auto; transition: all 0s ease 0s; -webkit-transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: auto; width: 496px; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-animation: none 0s ease 0s 1 normal none; -webkit-animation-play-state: running; -webkit-appearance: none; -webkit-backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-composite: source-over; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-fit: border; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; -webkit-box-shadow: none; -webkit-clip-path: none; -webkit-color-correction: default; -webkit-column-break-after: auto; -webkit-column-break-before: auto; -webkit-column-break-inside: auto; -webkit-column-axis: auto; -webkit-column-count: auto; -webkit-column-gap: normal; -webkit-column-progression: normal; -webkit-column-rule-color: rgb(0, 0, 0); -webkit-column-rule-style: none; -webkit-column-rule-width: 0px; -webkit-column-span: none; -webkit-column-width: auto; -webkit-filter: none; -webkit-align-content: stretch; -webkit-align-items: stretch; -webkit-align-self: stretch; -webkit-flex: 0 1 auto; -webkit-flex-flow: row nowrap; -webkit-justify-content: flex-start; -webkit-font-kerning: auto; -webkit-font-smoothing: auto; -webkit-font-variant-ligatures: normal; -webkit-grid-auto-flow: none; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-hyphenate-limit-after: auto; -webkit-hyphenate-limit-before: auto; -webkit-hyphenate-limit-lines: no-limit; -webkit-hyphens: manual; -webkit-line-align: none; -webkit-line-box-contain: block inline replaced; -webkit-line-break: auto; -webkit-line-grid: none; -webkit-line-snap: none; -webkit-locale: auto; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-marquee-direction: auto; -webkit-marquee-increment: 6px; -webkit-marquee-repetition: infinite; -webkit-marquee-style: scroll; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; -webkit-mask-size: auto; -webkit-nbsp-mode: normal; -webkit-order: 0; -webkit-perspective: none; -webkit-perspective-origin-x: 280px; -webkit-perspective-origin-y: 42px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(0, 0, 0); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: 0px; -webkit-transform: none; -webkit-transform-origin: 280px 42px; -webkit-transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: #000000; flood-opacity: 1; lighting-color: #ffffff; stop-color: #000000; stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: #000000; fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: baseline; dominant-baseline: auto; kerning: 0px; text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg; glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none; background-position: 0% 0%; background-repeat: repeat repeat;

and firefox will produce,

animation: 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s normal none 1 none; animation-play-state: running; backface-visibility: visible; background: none repeat scroll 0% 0% rgb(255, 165, 0); border: 0px none rgb(0, 0, 0); border-radius: 0px 0px 0px 0px; border-collapse: separate; border-spacing: 0px; bottom: auto; box-shadow: none; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); content: none; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font: 400 16px/20px serif; height: 20px; ime-mode: auto; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0px; marker-offset: auto; max-height: none; max-width: none; min-height: 0px; min-width: 0px; opacity: 1; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; overflow: visible; padding: 32px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 280px 42px; pointer-events: auto; position: static; quotes: """ """ "‘" "’"; resize: none; right: auto; table-layout: auto; text-align: start; -moz-text-blink: none; -moz-text-decoration-color: rgb(0, 0, 0); -moz-text-decoration-line: none; -moz-text-decoration-style: solid; text-indent: 0px; text-overflow: clip; text-shadow: none; text-transform: none; top: auto; transform: none; transform-origin: 280px 42px 0px; transform-style: flat; transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ; unicode-bidi: -moz-isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 496px; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; -moz-appearance: none; -moz-background-inline-policy: continuous; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-box-sizing: content-box; -moz-columns: auto auto; -moz-column-gap: 16px; -moz-column-rule: 0px none rgb(0, 0, 0); -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-hyphens: manual; -moz-image-region: auto; -moz-orient: horizontal; -moz-outline-radius: 0px 0px 0px 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-align-last: auto; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-shadow: default; clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: optimizelegibility; vector-effect: none;

So how to get the proper CSS code like Evernote which i can reproduce for any browser? Or is there any way to produce proper CSS from the generated CSS? Any help on this would be greatly useful.. Thanks in advance..

• Zim84: Do you mean by "all" only what you have defined in your html, css and js or really "all", that also includes browser defaults and custom user styling? If its the later, you already got the solution..
• Stranger: @Zim84 "All" refer to all the CSS(html, css and js) which the browser used to make the only particular element looks like that.. And here in the eg., the element with the id "check"
• Douglas: What is it you're trying to do with this? Trying to write some sort of cross-browser css debugger? Looking at the code of Firebug Lite might help.
• Beetroot-Beetroot: If you really want "all", then why are you surprised that the list is so long?
• leftclickben: It's different in other browsers because different browsers have different sets of defaults.

Answer 1

I achieved this through a somewhat hack. You still get many properties which are not useful but it definitely reduces the number of properties.

var oCheck = document.getElementById("Check");

Compare this object

window.getComputedStyle(oCheck)

with this one

window.getComputedStyle(document.createElement(oCheck.tagName));

And only consider the properties which do not match.

• Zim84: Nice idea, I like this one!