将我的对象输出为css结构

output my object as in css structure

本文关键字：css 结构 输出 我的 对象      更新时间：2023-09-26

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

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

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

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

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);

这是一个JSBin。

相关文章：