我们目前在我们的项目中使用以下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(如果你使用它,什么也不会发生)