1

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

ありがとう！

4

1 に答える 1

2

シンプルなもの。

すべて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 ルールを追加する代わりに、文字列を返す必要があります。

これがカバーしていないコーナーケースが山ほどあると確信しています。慎重に実装してください。

于 2012-09-19T11:16:32.547 に答える