Question

我正在开发一个没有HTML或CSS层的非网络平台，只是一个纯粹的JavaScript实现。

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

我该怎么做？

Answer 1

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

你看过其中任何一个吗？

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

或

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

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

HTH

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

Answer 3

尝试以下代码“不带任何外部库”：

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

CSS到JSON解析器或转换器

3 个答案: