将HTML元素的“样式”属性转换为JSON

Question

我需要使用JavaScript / jQuery将HTML元素的style属性转换为JSON对象。 我该怎么办呢？

澄清：假设我有<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

使用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 3

你也可以自己动手 - 这并不难。 style的MDC文档提供了充足的数据：

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

也许是如此轻微的回答，但我遇到了这个线程，寻找一种方法将style属性转换为一个对象，准备传递给$（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 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;
}

// example- styleObject（elementreference）;

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

但为什么不直接使用cssText字符串作为值？

Answer 6

技术上是“单线”[ES6]

let json = document.querySelector('div').getAttribute('style')
  .split(';')
  .filter(s => s.length)
  .reduce((json, s) => ({ ...json, [s.split(':')[0].trim()]: s.split(':')[1].trim() }), {})

（使用的HTML）：

<div style="a: 100%; b: none;"></div>