2

document.styleSheets を使用して、CSS calc 機能のシムを追加しようとしています。

基本的に、各スタイルシートとそれに続くルールをループし、どこかで発生する calc を探し、JavaScript で計算を行い、関連する要素に適用します。

これは、ページ上のすべての要素をループして、失敗した計算ルールがあるかどうかを確認するよりもはるかに高速ですが、問題は、この方法でエラーのある CSS ルールを取得する方法が見つからないことです。rules 配列と cssRules 配列の両方に、ブラウザーが有効と見なす CSS のみが含まれます。

私の質問はこれです、この方法でこれらの無効な CSS 値を取得する方法はありますか?

私が使用しているコードは以下のとおりで、機能しますが、とにかく calc をサポートするブラウザーでのみ機能します。これは私には役に立ちません。これを機能させるには、読み込まれた CSS ドキュメントに表示されるすべての CSS ルールを取得できる必要があります。

これは可能ですか、それとも、クロスブラウザーの calc の素晴らしさという想像上のファンタジー ツリーを鳴らしているのでしょうか?

calcShim = function(){
    var stylesheets = document.styleSheets;
    var calcs = [];
    for (var i=0, j=stylesheets.length; i<j; i++){
        var stylesheet = stylesheets[i];
        var rules = stylesheet.cssRules;
        if (rules && rules.length > 0){
            for (var k=0, l=rules.length; k<l; k++){
                var rule = rules[k];
                var ruleText = String(rule.cssText);
                if (ruleText.match("calc")){
                    calcs.push(ruleText);
                };
            };
        }
    };

    for (var i=0, j=calcs.length; i<j; i++){
        var string = calcs[i];
        var reference = calcs[i].match(/^[^{]{1,}/g)[0];

        var objects = $(reference);
        for (var k=0, l=objects.length; k<l; k++){
            var object = $(objects[k]);
            var parent = object.parent();

            if  (parent.is(":visible")){
                var parentWidth = parseInt(parent.width());
                var percent = parseInt(string.match(/(?:calc\()([0-9]{1,3})(?=%)/)[1])/100;
                var operator = string.match(/(?:calc[^)]{1,})([\+\-\*\/])(?=\s[0-9]{1,3}px)/)[1];
                var value = parseInt(string.match(/(?:calc[^)]{1,}[\+\-\*\/]\s)([0-9]{1,3})(?=px)/)[1]);

                var mathString = (parentWidth*percent) + " " + operator + " " + value;
                var result = eval(mathString);
                object.css({"width": result});
            }
        };
    };
};

私はこのコードがより良い/よりきれいになる可能性があることを認識しています.概念実証を考え出そうとしていました.

4

0 に答える 0