jquery - JavaScript CSS 解析器

Question

我正在为像 jquery 一样工作的 javascript 搜索 css 解析器，例如：

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

演示

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 规则。

我敢肯定，这没有涵盖大量的极端情况。谨慎实施。