Question

I need to convert the style attribute of an HTML element to a JSON object with JavaScript / jQuery. How should I go about this?

Clarification:
Lets say I have <div style="font-size: 14px; text-align: center;"></div>, so I want a JSON object: {font-size: 14px, text-align: center}

Answer 1

Using the jquery-json plugin,

HTML

<element id="myElt" style="foo: 1; bar: x; baz: none;"/>

JavaScript

var styles = $('#myElt').attr('style').split(';'),
    i= styles.length,
    json = {style: {}},
    style, k, v;


while (i--)
{
    style = styles[i].split(':');
    k = $.trim(style[0]);
    v = $.trim(style[1]);
    if (k.length > 0 && v.length > 0)
    {
        json.style[k] = v;
    }
}

alert($.toJSON(json));

http://jsfiddle.net/mattball/aT77q/