JavaScript에서는 블록에 선언된 getPropertyValue(property)
获取 CSS 变量的值。此函数对于检索 :root
변수를 유용하게 사용할 수 있습니다.
그러나 변수 표현식에 calc
的函数,则 getPropertyValue
调用将以文本形式返回表达式而不是计算它,即使使用 getCompulatedStyle
와 같은 내용이 포함된 경우에도 마찬가지입니다.
calc
와 같은 CSS 함수를 사용하여 CSS 변수의 계산된 값을 얻는 방법은 무엇입니까?
아래 예를 참조하세요:
이상한 방법은 추가하는 것입니다
으아악 으아악 으아악귀하의 사용 사례에 이것이 효과가 있을지는 모르겠지만, 방금 테스트해 본 결과 작동합니다.
계산된 값은 정적이지 않고 다른 속성에 따라 달라지므로 기술적으로는 불가능합니다. 이 경우에는 픽셀 값을 다루기 때문에 간단하지만 백분율 값이 있는 상황을 상상해 보세요. 백분율은 다른 속성에 상대적이므로
var()
一起使用之前我们无法计算它。如果我们使用em
、ch
와 같은 단위에서는 논리가 동일합니다다음은 설명을 위한 간단한 예입니다.