4

マイクロクラスを介して数値を指定するための CSS フレームワークをテストしています。たとえば、次のようなもの<div class="fifty percent wide">は に変換される場合がありますwidth: 50%。実装では、CSS 変数 (カスタム プロパティ) を使用します。

次の CSS を検討してください。

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

それはすべて問題なく、うまく機能します。問題は、テスト スイートを作成して、その結果が のカスタム プロパティのfifty percent値になることを確認することです。残念ながら、の値を調べるために使用すると、(未解決、未計算の) "calc" 文字列全体が表示されます。の値を調べると、「512px」などの解決済みの値が得られます。--percent50%getComputedStyle--percentwidth

カスタムCSSプロパティの解決された計算値をプログラムで取得して検証する方法はありますか? それとも、「計算」式の評価を強制する API ですか?

4

2 に答える 2

3

.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>

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

于 2016-11-15T10:35:49.307 に答える