css将字符串转换为html,将CSS文本转换为JavaScript对象

这是解析器的开始,可以做你想要的.当然它需要工作,特别是如果你想处理可能提供的任何通用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, 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 + '";');

}