Question

我们目前在项目中使用以下jQuery插件将CSS解析为JSON对象。

http://bililite.com/blog/2009/01/16/jquery-css-parser/#parserdetails

我们现在需要将JSON对象解析回CSS（＆＃34;作为字符串＆＃34;）。

我无法使用此插件找到从JSON对象解析回CSS的方法。它将CSS解析为JSON很好，它使用的结构正是我们需要的，但我们还需要一种方法将JSON对象解析回CSS。

是否有任何可能的解决方案可以将此插件生成的JSON对象解析回CSS？

要反序列化的示例JSON对象：

{
  'div div:first' : {
    'font-weight' : 'bold',
    'color': 'rgba(255,255,255,0.5)'
  },
  'div > span' : {
    'color': 'red'
  }
}

更多信息：我可能会错过这个插件的功能，但我确实非常仔细地查看了这些文档。

我也遇到过这个解析JSON并返回的插件，但JSON格式与我们目前使用的格式相差甚远。 https://github.com/aramk/CSSJSON

Answer 1

试试这个：

var cssString = "";

// cssJSON would be the JavaScript object representing your CSS.
for (var objKey in cssJSON) {

    // objKey is the name of the key in the JavaScript object.
    // In this case, it's also the CSS selector.
    cssString += objKey + " {";

    var cssProperties = cssJSON[objKey];
    for (var cssPropertyName in cssProperties) {
        cssString += cssPropertyName + ": " + cssProperties[cssPropertyName] + ";";
    }

    cssString += "}";
}

请注意：我尚未测试此代码，因此请自行承担风险。可能存在一些不考虑的边缘情况。

Answer 2

也许JavaScript CSS Parser可以帮到你

该工具本身非常简单，

假设您将整个CSS作为字符串 cssString ：

var parser = new CSSParser();
var serialized = parser.parse(cssString, false, true);

这将生成CSS样式表的Json可序列化对象。

您现在可以迭代所有css规则并检查它们：

var firstRule = serialized.cssRules[0]; //Returns the first css rule you defined
var thirdDeclaration = firstRule.declarations[2]; //Returns the third declaration of your first css rule
console.log(thirdDeclaration.property); //Prints out the value

因此，例如，如果您序列化了这个字符串：

body {
   color: black;
   width: 50px;
   height: 70px;
   text-align: center;
}

p {
   color: red;
}

上面的代码会输出 70px ，这是第一个定义的css规则（正文）的第三个声明（高度）的属性值强>）

我猜你可以执行一些逻辑来遍历所有序列化的CSS Json对象，并将其反序列化为CSS文件，或者在运行时将规则添加到HTML标记中，无论如何，您拥有CSS所需的所有信息规则。

我希望这能帮到你！

PS：最重要的是，它不需要jQuery！：D（如果你使用它，没有任何事情发生）

如何将JSON对象（由jquery-css-parser创建）转换回有效的CSS代码？

2 个答案: