像在css结构中一样输出我的对象

Question

我有一个创建/更新此对象的过程：

style={
    "p2":{
        'color':'#fff',
        'background':'red'

    },
    "p3":{
        'color':'#fff',
        'background':'red'

    },
    "h2":{
        'color':'#fff',
        'background':'red'

    }
}

如何输出此对象以便在css结构中显示，以便能够将其复制并粘贴到css文件中？

Answer 1

只需遍历对象的键并将其输出到某处：

var output = "";
for (var key in style) {
    if (style.hasOwnProperty(key)) {
        output += key + " { \n";
        for (var prop in style[key]) {
            if (style[key].hasOwnProperty(prop)) {
                output += prop + ": " + style[key][prop] + ";\n";
            }
        }
        output += "}\n";
    }
}
console.log(output);
document.write(output);

// Not sure if below works
var styleEl = document.createElement("style");
styleEl.innerHTML = output;
document.body.appendChild(styleEl);

Here是一个JSBin。