How to get all custom css for an element without the browser default css

Question

I need to get all the css applied to an element by id or by class I need the css custom css only

I have this function which returns all css including the browser default built in css, i need only the applied css, like how firebug would work.

Firebug is not sufficient for me to use as i need the data to be exported into json eventually and used in various ways.

This needs to be a javascript or jquery solution only.

This is what i have so far

<div id="elemId" style="border:1px solid red;">

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, true);
console.log(style);

So in general i need to know what css has been applied to this object i need all external and inline css. i cannot use a single getProperty by name because in most cases i do not know what has been applied, i need the full list of custom css.

Please only submit code you have tested yourself, dont paste from other forums without testing code.

Thanks Daniel

Do you have control over what stylesheets you are loading in the webpage? — Walker Boh, Apr 23 '15 at 19:19
If you're comfortable with a WebKit-only solution, have a look at `window.getMatchedCSSRules(...)` — The Conspiracy, Apr 23 '15 at 19:25
Is it something for you here? http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — romuleald, Apr 23 '15 at 19:32

score 0 · Answer 1 · answered Apr 23 '15 at 19:32

So when you say "default browser css", I believe you are seeing all applicable css rules when you run console log your style variable. If you want to see all css that was applied via stylesheet, jqyery, inline css, etc, use cssText:

HTML

<div id="elemId" style="border:1px solid red;">

JS

var elem1 = document.getElementById('elemId');
console.log(elem1.style.cssText);

Output will be

border: 1px solid: red;

jsfiddle

How to get all custom css for an element without the browser default css

1 Answers1