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

Question

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

澄清： 假设我有

，所以我想要一个 JSON 对象： {font -大小：14px，文本对齐：居中}

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

也许这个答案有点不对劲，但我遇到了这个线程，寻找一种将样式属性转换为对象的方法，准备传递给 $(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(元素引用);

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

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