这是解析器的开始,可以做你想要的.当然它需要工作,特别是如果你想处理可能提供的任何通用CSS.这假设输入css是按照您提供的方式编写的,第一行是属性的名称,最后一行是’}’,依此类推.
如果您不想只处理基本属性,编写复杂的解析器并不是一件容易的事.例如,如果您声明如下内容,该怎么办?
input[type="text"],table > tr:nth-child(2),#link a:hover {
-webkit-transition: width 2s; /* Safari and Chrome */
}
这是有效的CSS,但是如何从中提取有效的javascript变量名?如何将-webkit-transition转换为有意义的属性名称?整个任务闻起来像是你做错了.我没有在解析器上工作,而是在处理更稳定的解决方案.
顺便说一句,这是您可以从以下开始的代码:
var s = '.myBox {\n';
s += 'display: block;\n';
s += 'width: 20px;\n';
s += 'height: 20px;\n';
s += 'background-color: rgb(204,204);\n';
s += '}\n';
// split css by line
var css_rows = s.split('\n');
// filter out empty elements and strip ';'
css_rows = css_rows.filter(function(x){ return x != '' }).map(function(x){ return x.trim().replace(';','') });
// create object
var json_name = css_rows[0].trim().replace(/[\.\{\ \#]/g,'');
eval('var ' + json_name + ' = {};');
// remove first and last element
css_rows = css_rows.splice(1,css_rows.length-2)
for (elem in css_rows)
{
var elem_parts = css_rows[elem].split(':');
var property_name = elem_parts[0].trim().replace('-','');
var property_value = elem_parts[1].trim();
eval(json_name + '.' + property_name + ' = "' + property_value + '";');
}