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

How to convert a JSON object (created by jquery-css-parser) back to valid CSS code?

本文关键字：转换 有效 代码 CSS 创建 jquery-css-parser JSON 对象      更新时间：2023-09-26

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

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

我们现在需要将JSON对象解析回CSS("作为字符串")。

我找不到一种方法来解析从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

试试这个:

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 += "}";
}

请注意:我没有测试过此代码，因此请自行承担使用风险。

也许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规则(body)的第三个声明(height)的属性值。

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

我希望这对你有帮助!

PS:最好的是，它不需要jQuery!:D(如果你使用它，什么也不会发生)

相关文章：