javascript - Firefox は、一部の CSS 値が違法でない場合、黙って無視します。

Question

document.styleSheets を介してスタイルシートを取得したいのですが、Firefox は違法ではない CSS 値を黙って無視するようです。私は現在vh & vwを使用しています。css値を取得し、適切な px を生成したいと考えています。

Firefox が無視する値を取得する方法はありますか?

Answer 1

Firefox (およびおそらく他のブラウザー) は、スタイルシートから計算されたスタイルのみを返すと思います。

ただし、必要なタグを選択してより手動のプロセスに進み、そのテキスト コンテンツを取得する ajax リクエストを作成し (キャッシュにあるため、ほぼ瞬時に処理されます)、解析することができます。

html:

<link rel="stylesheet" href="style.css" id="css">

js (jQuery を使用):

$.get($("#css").attr("href"), function(data) //requests the css in ajax
{
   var selector = "div#right", rules = {};

   data = data.substring(data.indexOf(selector)); //trim all that is before your selector
   data = data.substring(data.indexOf("{") + 1, data.indexOf("}")); //get only what's in the curly braces
   data = data.split(";"); //split to get an array with each cell is a css rule

   for (var i = 0, l = data.length; i < l; i++) //loop through
   {
        data[i] = data[i].replace(/^\s+/, ''); //trim spaces before
        data[i] = data[i].replace(/\s+$/, ''); //trim spaces after

        if (data[i].indexOf(':') == -1) { continue; } //if rule is invalid, skip it

        data[i] = data[i].split(':'); //split rule so you have a sub-array with 0:key and 1:value
        rules[data[i][0]] = data[i][1]; //apply it to an object
   }

   console.dir(rules); //here you have. if your rules have "-" in it, you can't access with directly, but with brackets it'll be ok. ie : rules.margin-left is wrong but you can with rules["margin-left"].

}, "text");