カスタムプロパティを設定するためのCSS calcの結果の取得

Question

マイクロクラスを使用して数値を指定するCSSフレームワークをテストしています。たとえば、<div class="fifty percent wide">のようなものはwidth: 50%に変換される可能性があります。この実装では、CSS変数（カスタムプロパティ）が使用されます。すべての罰金だと素晴らしい作品

.fifty { --number: 50; } 
.percent { --percent: calc(1% * var(--number)); } 
.wide { width: var(--percent); } 

：

には、以下のCSSを考えてみましょう。問題は、テストスイートを作成して、fifty percentという結果が、カスタムプロパティ​​の値が50%であることを確認することです。残念ながら、を使用して​​の値を調べると、（未解決の、未計算の） "calc"文字列全体が表示されます。 widthの値を調べると、 "512px"などの解決済みの値が得られます。

解決済みのカスタムCSSプロパティの計算値をプログラムで取得して検証する方法はありますか？あるいは、 "calc"式の評価を強制するAPIですか？

Answer 1

これを行う1つの方法は、要素とその親からの幅（ピクセル単位）を取得することによって、パーセンテージを計算することです。次に、単純にparentWidthをelementWidthで割ってパーセンテージを計算します。

また、CSSを手動でテストすることもできます。すべてが期待どおりに機能する場合は、これ以上のテストケースは必要ありません。これが夜のうちに壊れてしまうのではないでしょうか？

Answer 2

あなたは.percentクラスの誤植があります

.percent { --percent: calc(1% * var(--number); } 
//          ^ you have to close Brackets of Calc() 
.percent { --percent: calc(1% * var(--number)); } 

私は、PXの要素の幅とその親を取得することにより、何か簡単なテストを行うことをお勧め：

var elem = document.getElementById("test"); 
 
var parent = document.getElementById("parent"); 
 
var elem_width = window.getComputedStyle(elem, null).getPropertyValue("width"); 
 

 
alert("50% of 200px parent width = " + elem_width);

#parent{ 
 
    background-color:black; 
 
    width:200px; 
 
    height: 200px; 
 
} 
 

 
.fifty { --number: 50; } 
 
.percent { --percent: calc(1% * var(--number)); } 
 
.wide { 
 
    width: var(--percent); 
 
    height: 100px; 
 
    background-color:red; 
 
}

<div id="parent"> 
 
    <div id="test" class="fifty percent wide"> 
 
    </div> 
 
</div>

を

_{注： ttributes、またはCSSからDOMへの理解ができないCSSスタイルです。それは設計によるものです。 Javascriptは、コードではなく、DOMにのみアクセスできます。だから、ブラウザ自体がサポートしていないjavascriptからプロパティにアクセスする方法はありません。}