How to convert an element css to JSON?

Question

I let my users to change any attribute(location, color, and ...) of every element in a page before printing.

I'm looking for a way which user can store the new style sheet and restore it anytime later?

I've tried to parse element.style, but it doesn't return an array! Also $(element).css() doesn't work without any argument!

No. how you want to store it ? which structure ? what about style attribute ? who wins ? the inline style or the attribute ? your question is not clear enough — Royi Namir, May 21 '14 at 11:02
Am I that unclear ? :-) -- does your document contains unique IDS for EVERY element? or it has also classes without id? if so , how would you like to store it ? ' — Royi Namir, May 21 '14 at 11:04
none of them are requierd! I can access them with jQuery attr function! I only want to store the changes to css file loaded styles! :) — Mohsen ZareZardeyni, May 21 '14 at 11:07
if your elements recieve the styles via the `style` attribute you can `split(';')` that, then `split(':')`, `map(x->'"'+x+'"')`, `join(':')`, `join(',')` and wrap in `{}` to get a json string — Valerij, May 21 '14 at 11:08

score 1 · Accepted Answer · answered May 21 '14 at 11:08

If you are okay with using a plugin for your task, try this plugin : https://github.com/reworkcss/css-parse

Demo:http://bililite.com/blog/blogfiles/cssparser/cssparsertest.php

Example: CSS:

body {background: #eee;color: #888;}

Output:

{
    "type": "stylesheet",
        "stylesheet": {
        "rules": [{
            "type": "rule",
                "selectors": [
                "body"],
                "declarations": [{
                "type": "declaration",
                    "property": "background",
                    "value": "#eee"
            }, {
                "type": "declaration",
                    "property": "color",
                    "value": "#888"
            }]
        }]
    }
}

Mohsen ZareZardeyni · Answer 2 · 2014-05-21T11:19:57.350

1

Thanks to Johan I found the correct answer! I only need to parse

window.getComputedStyle(element);

tnx everyone:)

edited May 21 '14 at 11:19

answered May 21 '14 at 11:13

Mohsen ZareZardeyni

936
7
17

score 0 · Answer 3 · answered May 21 '14 at 11:09

Instead of assigning custom styles to every element you could use unique style classes and a single stylesheet for the entire page (add it to the head, remembering the element or giving it a unique id) which contains your custom styles.

You can then enumerate the stylesheet through stylesheet.cssRules and build your custom json

How to convert an element css to JSON?

3 Answers3