document.documentElement.style.getPropertyValue
-
CSS 변수 사용 및 javascript로 동적 수정 방법IT/CSS 2021. 10. 25. 10:43
CSS 변수 설정 및 사용법은 아래와 같다. /* 전역 변수 설정 --변수명:값 */ :root { --my-favorite-color: blueviolet; } /* 변수의 element 적용 var(변수명) */ .my-element { background-color: var(--my-favorite-color); } 그럼, 동적으로 변경을 할 수 있을까? javascript에서 css 변수 조회 및 변경을 위해 아래와 같은 함수를 지원한다. // 인라인 스타일에서 변수 얻기 document.documentElement.style.getPropertyValue("--my-favorite-color"); // 어느 곳에서나 변수 얻기 getComputedStyle(document.documentElem..