CSS转JSON解析器或转换器

Question

我正在使用一个没有HTML或CSS层的非Web平台，只有纯JavaScript实现。

我想使用AJAX将CSS文件加载为文本字符串，将CSS解析为JS对象或JSON，然后使用实用库来解释应该应用于DOM树中元素的样式。

我应该如何做到这一点？

- jonycheung

---

你将如何在JSON中表示你的CSS样式表？ - Thai

那是问题的一部分。我愿意听取建议。它不必严格符合JSON格式...只要是样式的JS表示就可以了。 - jonycheung

另请参阅此处：http://lesscss.org/ ... 可能有所帮助。 - Robert Harvey

Answer 1

我认为你正在寻找一个“JavaScript CSS解析器”。

你看过这两个中的任何一个吗？

http://www.glazman.org/JSCSSP/

或者

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

第一个看起来很适合，但如果你喜欢jQuery，那么你可能更喜欢第二个。

希望有所帮助。

- laher

---

我研究了JSCSSP。文档有限。我找不到如何在JS中访问解析的CSS。我检查了CSS，他们在分离样式方面做得很好，但没有一个好的方法来访问属性{"parsedCssText": "h1 { margin-top: var(m...pright: var(myMargin);}"}。 - jonycheung

jQuery CSS解析器可能有点棘手。由于我们的平台没有HTML和CSS，因此jQuery无法使用。 - jonycheung

@JONYC：var parser = new CSSParser(); var sheet = parser.parse('body { color:black; }', false, true); sheet.cssRules[0].declarations[0].property; // statement returns 'color' 参考这个JSFiddle。 （翻译：创建一个CSS解析器，解析字符串"body { color:black; }"并将结果存储在sheet中，然后可以使用sheet.cssRules[0].declarations[0].property获取声明中的属性名称"color"。） - josh3736

很高兴它对你有用。我猜Josh3736应该得到这个积分！ - laher

我找不到一种使用JSCSSP从JSON对象解析回CSS的方法。JSCSSP可以很好地将CSS解析为JSON，并且它使用的结构正是我们所需要的，但我们还需要一种将JSON对象解析回CSS的方法。有什么想法/建议吗？ - Norman

Answer 2

我查看了@amir75建议的两个链接。第一个看起来最好，但对于我要做的事情来说代码太长了。我决定拼凑一个轻量级的脚本。它不使用jQuery，但如果你想使用.get()等加载CSS文件，那也可以。看一下example.html和js控制台输出，以了解结构。如果在CSS中使用注释，您可以选择保留元素的顺序，否则，它仍将保持元素的顺序，但不会保留注释的顺序，同时使用更简单的JSON结构。

https://github.com/aramkocharyan/CSSJSON

用法：

// To JSON, ignoring order of comments etc
var json = CSSJSON.toJSON(cssString);

// To JSON, keeping order of comments etc
var json = CSSJSON.toJSON(cssString, true);

// To CSS
var css = CSSJSON.toCSS(jsonObject);

- Aram Kocharyan

Answer 3

尝试以下代码，"不需要"任何外部库:

```html

尝试以下代码，"不需要"任何外部库:

```

function cssToJson(cssStr){
var tmp="";
//handling the colon in psuedo-classes
var openBraces=0;
for(var i=0;i<cssStr.length;i++){
    var c=cssStr[i];
    if(c=="{"){openBraces++;}
    else if(c=="}"){openBraces--;}
    if(openBraces==0 && c==":"){
        tmp+="_--_";
    } else {
        tmp+=c;
    }
}
cssStr=tmp;
cssStr=cssStr.split("\"").join("'");
cssStr=cssStr.split(" ").join("_SPACE_");
cssStr=cssStr.split("\r").join("");
cssStr=cssStr.split("\n").join("");
cssStr=cssStr.split("\t").join("");
cssStr=cssStr.split("}").join("\"}####\"");
cssStr=cssStr.split(";\"").join("\"");
cssStr=cssStr.split(":").join("\":\"");
cssStr=cssStr.split("{").join("\":{\"");
cssStr=cssStr.split(";").join("\",\"");
cssStr=cssStr.split("####").join(",");
cssStr=cssStr.split("_--_").join(":");
cssStr=cssStr.split("_SPACE_").join(" ");
if(cssStr.endsWith(",")){
    cssStr=cssStr.substr(0,cssStr.length-1);
}
if(cssStr.endsWith(",\"")){
    cssStr=cssStr.substr(0,cssStr.length-2);
}
cssStr="{\""+cssStr+"}";
try{
    var jsn=JSON.parse(cssStr);
    return jsn;
} catch(e){
    console.log(e);
    return null;
}
}

- Devashish Priyadarshi