CSS 변수 사용 및 javascript로 동적 수정 방법

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.documentElement).getPropertyValue("--my-favorite-color");

// 인라인 스타일에 변수 설정하기
document.documentElement.style.setProperty("--my-favorite-color", "magenta");

현재 CSS 변수 관련한 지원은 인터넷익스플로러를 제외하고 모두 지원한다.

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

https://spacejelly.dev/posts/how-to-create-css-custom-properties-that-dynamically-update-with-react-javascript/

How to Create CSS Custom Properties That Dynamically Update with React & JavaScript