カスタムCSSプロパティのリストを取得する方法

私はカスタムCSSプロパティを探しており、以下のコードを思いついています。カスタムCSSプロパティのリストを取得する方法

キャンバスタグにSTYLE属性を使用してCSSをインラインで配置すると（style = " - rgLinewidth：3"のように）、次に示すスクリプトを使用してカスタムCSS値を取得できます。

ただし、以下のようにタグを使用すると、カスタムCSSプロパティは表示されません。

可能ですか？そしてもしそうなら、どのように？

<html> 
    <head> 
     <style> 
      canvas#cvs { 
       --rgLinewidth: 3; 
       background-color: red; 
      } 
     </style> 
    </head> 
<body> 

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> 

    <script> 
     canvas = document.getElementById("cvs"); 
     styles = window.getComputedStyle(canvas); 

     alert(styles.getPropertyValue('background-color')); 
     alert(styles.getPropertyValue('--rgLinewidth')); 

     for (var i=0; i<styles.length; i++) { 
      if (canvas.style[i].indexOf('--rg') === 0) { 
       var value = styles.getPropertyValue(canvas.style[i]); 
       alert([canvas.style[i], value]); 
      } 
     } 
    </script> 
</body> 
</html>

出典

2016-07-08 Richard

それはあなたが計算されたスタイルに問い合わせるために働き、その後、彼らは存在しないインラインスタイルから、対応するプロパティの値を取得しようとしません - あなたのキャンバスには、インラインスタイルを定義していません。プロパティを見つける同じstylesオブジェクトを介して値を照会する必要があります。

要素を通過したとき、その計算されたスタイルを検索し、名前--rgで始まる最初のCSS変数の値を返します。次の関数考えてみましょう：

function find_first_rg_value(el) { 
    var styles = getComputedStyle(el); 
    for (var i = 0; i < styles.length; i++) { 
     if (styles[i].startsWith('--rg')) { 
      return styles.getPropertyValue(styles[i]); 
     } 
    } 
}

（find_first_rg_value(canvas)のように使用します）

を

私のアプローチとあなたの違いは、私が言ったように、canvas.style[i]から値を取得しようとしていますが、canvas.styleが効果的ですです。代わりにstylesを使用してください。

計算されたスタイル（getComputedStyle）は、CSSカスケード、継承などによって計算される「要約」スタイルを含み、インラインスタイルがある場合は、上書きされます（優先度が優先されます）。したがって、インラインスタイルの割り当ては計算されたスタイルに影響しますが、インラインスタイルを照会すると、割り当てたインラインスタイルのみが提供されます。

これは、あなたのようなほとんどの場合、getComputedStyleを使用することを意味します。さらに、CSS変数はstyle.fontName構文を使用して照会することができないため、インラインまたは計算されたスタイルオブジェクトを扱っている場合でも、getPropertyValueファンクション（すべてのダッシュintact）を使用する必要があります。

出典

2016-07-08 10:56:01 amn

沖電気、私は今これを持っています：canvas = document.getElementById（ "cvs"）; styles = getComputedStyle（canvas）; for（var i = 0; i Richard

これはFFだけがCSS変数を完全にサポートしているからですか？ – Richard

ここに私がセットアップしたテストページがあります。これはFFでのみ動作します：http://www.rgraph.net/tests/css-variables.html – Richard

カスタムCSSプロパティのリストを取得する方法

答えて

関連する問題