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});
}
};
};
};
私はこのコードがより良い/よりきれいになる可能性があることを認識しています.概念実証を考え出そうとしていました.