계산식 표현식을 사용하여 CSS 변수의 계산된 값 가져오기

Question

JavaScript에서는 블록에 선언된 getPropertyValue(property) 获取 CSS 变量的值。此函数对于检索 :root변수를 유용하게 사용할 수 있습니다.

으아아아

그러나 변수 표현식에 calc 的函数，则 getPropertyValue 调用将以文本形式返回表达式而不是计算它，即使使用 getCompulatedStyle와 같은 내용이 포함된 경우에도 마찬가지입니다.

으아아아

calc와 같은 CSS 함수를 사용하여 CSS 변수의 계산된 값을 얻는 방법은 무엇입니까?

아래 예를 참조하세요:

으아아아 으아아아 으아아아

Answer 1

이상한 방법은 추가하는 것입니다

으아악 으아악 으아악

귀하의 사용 사례에 이것이 효과가 있을지는 모르겠지만, 방금 테스트해 본 결과 작동합니다.

Answer 2

계산된 값은 정적이지 않고 다른 속성에 따라 달라지므로 기술적으로는 불가능합니다. 이 경우에는 픽셀 값을 다루기 때문에 간단하지만 백분율 값이 있는 상황을 상상해 보세요. 백분율은 다른 속성에 상대적이므로 var() 一起使用之前我们无法计算它。如果我们使用 em、ch와 같은 단위에서는 논리가 동일합니다

다음은 설명을 위한 간단한 예입니다.

으아악 으아악 으아악