Question

我正在搜索css解析器以获取类似于jquery的javascript，例如：

var style = {

    '.test': {
        paddingTop: 20,
        height: 100,
        width: 100,
        borderRadius: 5
    },

    '.test2': {
        color: '#888'
    }

}

这个json必须转换成：

.test{
    padding-top: 20px;
    height: 100px;
    width: 100px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}   
.test2 {
    color: #888;
}

谢谢！

Answer 1

简单。

将所有camelCase替换为css-hyphenation（道具为@AKX以获得更好的正则表达式）。

String.prototype.toCssProperty = function () {
    return this.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};

将px附加到所有数值。

if(typeof value === 'number')
    value += 'px';

Demo

function addRule(selector, styles) {
    var builder = [];
    for(var key in styles) {
        if(styles.hasOwnProperty(key)) {

            var value = styles[key];
            if(typeof value === 'number')
                value += 'px';

            builder.push(key.toCssProperty() + ':' + value);
        }
    }       

    var rule = builder.join('; ');
    document.styleSheets[0].addRule(selector,rule);
}

function applyStyles(s) {
    for(var key in s) {
        if(s.hasOwnProperty(key)) {
            addRule(key, s[key]);            
        }
    }
};

如果您只想要字符串，则应该返回该字符串，而不是像我在演示中那样添加css规则。

我确信有大量的角落案例没有涵盖。谨慎实施。

JavaScript CSS解析器

1 个答案: