Extract CSS from an element with javascript

Question

Is it possible to build sort of an Applet that you can run into any page and by selecting a element you extract it's css attributes?

Imagine like firebug allows you to select the div you want to see the code, but instead you select for example a button and get the CSS of it in a selectable field you can copy and paste.

This should be easy to implement. You'd need a mouseClickListener. And then you can extract the Style from the selected element using a .style or a .css. Look here http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript and here http://stackoverflow.com/questions/395341/get-element-stylesheet-style-in-javascript and here http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — ffledgling, Mar 05 '13 at 15:26

score 2 · Answer 1 · answered Mar 05 '13 at 15:23

You can get the CSSStyleDeclaration object via window.getComputedStyle

var styles = window.getComputedStyle(document.getElementById('foo'), null);
for (style in styles) {
    if (styles.hasOwnProperty(style)) {
        console.log(style, styles[style]);
    }
}

score 1 · Answer 2 · answered Mar 05 '13 at 15:24

1

Not sure about Firebug bug Chrome's Developer Tools gives you CSS that you can copy, paste and edit. It also shows a breakdown of which files, internal styles or inlines the styles are coming from, and the final cascaded "Computed Style."

answered Mar 05 '13 at 15:24

mbaytas

2,676
7
26
37

This doesn't really answer the question. – JJJ Mar 05 '13 at 15:24
Yes it does, even firefox developer bar has a lot of cool features. I was thinking about something you can add to your bookmark as an aplet and then you can simply click on a element on the page you are and extract that bit of html and its css style. – Caio Calderari Mar 11 '13 at 14:34

score 1 · Accepted Answer · answered Mar 11 '13 at 22:22

I would like to thanks who tried to help with this question.

After thinking about what I was asking and wanting to do is pretty much what we already can find on the built in browser web developer tools such as chrome or firefox.

There's no point in reinventing the wheel so the answer would be, yes it's possible to do so with javascript but it's not necessary because we already can find tools to achieve the same result which would be examining the html and css and being able to copy/extract it from the source.

Thanks for your time and sorry for the inconvenience.

Extract CSS from an element with javascript

3 Answers3