[JS] JavaScript에서 CSS 변수 값 사용하기

프론트엔드 개발을 하다가 동적으로 HTML 요소의 스타일을 변경해줘야 하는 상황을 만났다. 나는 styled-component와 같은 CSS-in-JS 방식을 사용하지 않고 공통 스타일 값들을 CSS의 변수로 관리하고 있었기 때문에, 또 한 번 자바스크립트 상수를 선언해 중복해서 값을 관리하고 불러와 사용해야 하는 건지 고민이 생겼다.

하지만 다행히도 자바스크립트에는 CSS에 선언한 변수의 값에 접근하는 API가 존재했다!

getComputedStyle() 과 getPropertyValue()

• getComputedStyle(): 인자로 전달받은 HTML 요소에 대한 모든 CSS 속성값을 담은 스타일 객체 반환
• getPropertyValue(): 스타일 객체 중 인자로 전달받은 특정 속성에 대한 값을 문자열로 반환

예제

CHANGE 버튼을 클릭하면 랜덤으로 배경색이 바뀌는 박스를 예시로 API를 테스트해보자. (👉전체 코드👈)

HTML

<div id="app">
  <button class="button">CHANGE</button>
  <div class="box">HELLO !</div>
</div>

CSS

변수는 HTML 루트에 선언했다.

:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-info: #17a2b8;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
}

JS

이제 앞서 설명한 두 메서드를 사용해 :root에 선언한 변수의 값을 가져올 것이다.

먼저 랜덤으로 컬러 변수를 선택하기 위한 코드를 작성한다.

const props = [
    "--color-primary",
    "--color-secondary",
    "--color-success",
    "--color-info",
    "--color-warning",
    "--color-danger"
  ];
const randomProp = props[Math.floor(Math.random() * props.length)];

그리고 html 요소를 getComputedStyle() 메서드의 인자로 전달해 :root에 대한 스타일 객체를 반환받는다(1️⃣). 그 중 특정 프로퍼티(여기서는 randomProp)를 getPropertyValue()의 인자로 전달하여 최종적으로 CSS에 선언했던 값을 얻는다(2️⃣).

const root = document.documentElement;
const rootStyle = getComputedStyle(root); // 1️⃣
const randomColor = rootStyle.getPropertyValue(randomProp); // 2️⃣

마지막으로 버튼을 클릭해서 컬러가 변경될 수 있도록 코드를 작성한다.

function getRandomColorFromCSS() {
  const props = [
    "--color-primary",
    "--color-secondary",
    "--color-success",
    "--color-info",
    "--color-warning",
    "--color-danger"
  ];
  const randomProp = props[Math.floor(Math.random() * props.length)];

  const root = document.documentElement;
  const rootStyle = getComputedStyle(root);
  const randomColor = rootStyle.getPropertyValue(randomProp);

  return randomColor;
}

function changeBoxColor() {
  const box = document.querySelector(".box");
  box.style.backgroundColor = getRandomColorFromCSS();
}

const button = document.querySelector(".button");
button.addEventListener("click", changeBoxColor);