Преобразовать атрибут «Стиль» HTML-элемента в JSON

Question

Мне нужно преобразовать атрибут стиля элемента HTML в объект JSON с помощью JavaScript / jQuery.Как мне поступить об этом?

Уточнение: Допустим, у меня есть <div style="font-size: 14px; text-align: center;"></div>, поэтому я хочу объект JSON: {font-size: 14px, text-align: center}

Answer 1

Как насчет этого:

function getStyles(el) {
    var output = {};

    if (!el || !el.style || !el.style.cssText) {
        return output;
    }

    var camelize = function camelize(str) {
        return str.replace (/(?:^|[-])(\w)/g, function (a, c) {
            c = a.substr(0, 1) === '-' ? c.toUpperCase () : c;
            return c ? c : '';
        });
    }

    var style = el.style.cssText.split(';');

    for (var i = 0; i < style.length; ++i) {
        var rule = style[i].trim();

        if (rule) {
            var ruleParts = rule.split(':');
            var key = camelize(ruleParts[0].trim());
            output[key] = ruleParts[1].trim();
        }
    }

    return output;
}

var element = document.querySelector('div');
var css = getStyles(element);
console.log('css ->', css);

выход:

{
    color: "green",
    border: "1px solid orange",
    marginLeft: "15px",
    padding: "20px",
    backgroundColor: "white"
}

скрипка:

https://jsfiddle.net/grt6gkpe/1/

Answer 2

Возможно, даже слегка отклоненный ответ, но я наткнулся на этот поток, ища способ превратить атрибут стиля в объект, готовый к передаче в $ (el) .css ().Я написал этот небольшой плагин, чтобы сделать это:

$.fn.styleAttributeToObject = function () {
    var style = $(this).attr('style'),
        asObject = {};
    if ('string' === typeof style) {
        $.each(style.split(';'), function (i, e) {
            var pair = e.split(':');
            if (2 === pair.length) {
                asObject[pair[0]] = pair[1];
            }
        });
    }
    return asObject;
};

Надеюсь, что это полезно для других.

Answer 3

Вы также можете свернуть свои собственные - это не так сложно. Документация MDC для style содержит достаточные данные:

function getStyles(element) {
    var style = element.style;
    var ret = {};
    for (var i = 0; i < style.length; ++i) {
        var item = style.item(i);
        ret[item] = style[item];
    }
    return ret;
}

Answer 4

Использование плагина jquery-json ,

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/

Answer 5

Вы можете получить строку из element.style.cssText и разделить ее на

function styleObject(element){
    var obj= {},
    str= element.style.cssText.match(/([^:]+\: *[^;]+); */g),
    tem, i= 0, ax, L= str.length;
    while(i<L){
        tem= str[i++].split(/: */);
        obj[tem[0]]= tem[1];
    }
    return obj;
}

// ПРИМЕР- styleObject (elementreference);

/*  value: (Object)
{
    display: 'block;',
    margin-left: '1ex;',
    margin-right: 'auto;',
    position: 'relative;',
    width: '1193px;',
    z-index: '100;',
    visibility: 'visible;'
}

Но почему бы просто не использовать строку cssText в качестве значения?