計算に似た式を使用して CSS 変数の計算値を取得します

Question

JavaScript では、getPropertyValue(property) を使用して CSS 変数の値を取得できます。この関数は、:root ブロックで宣言された変数を取得するのに役立ちます。

リーリー

ただし、この変数式に calc のような関数が含まれている場合、getPropertyValue 呼び出しは、getCompulatedStyle# を使用した場合でも、式を計算するのではなくテキストとして返します。 ## の場合は true です。 リーリー

calc などの CSS 関数を使用して CSS 変数の計算値を取得するにはどうすればよいですか?

以下の例を参照してください:

リーリー リーリー リーリー

Answer 1

奇妙な方法は、

を追加することです。 リーリー リーリー リーリー

これがあなたのユースケースで機能するかどうかはわかりませんが、テストしたところ、機能しました。

Answer 2

計算された値は静的ではなく、他のプロパティに依存するため、技術的にはできません。この場合、ピクセル値を扱っているので単純ですが、パーセンテージ値がある状況を想像してください。パーセンテージは他のプロパティに相対的なものであるため、var() で使用する前に計算することはできません。 em、ch などの単位を使用する場合も、ロジックは同じです。

次に、説明するための簡単な例を示します:

リーリー リーリー リーリー