자바스크립트로 CSS 변수 제어하기

자바스크립트로 CSS 변수(사용자 지정 CSS 속성)를 제어하는 방법에 대해 알아봅니다.
CSS 변수(또는 커스텀 속성)을 자바스크립트로 접근하고 설정하는 방법은 간단합니다. CSS 변수를 사용하면 자바스크립트로 값을 동적으로 변경하여 스타일을 조작할 수 있습니다.

이 글에서는 다음의 목차로 설명합니다.

사전에 필요로 하는 지식

CSS 변수에 대해 알고 있어야 합니다.

CSS 변수 완벽 가이드

순수 자바스크립트(흔히 Vanillar JS라고 부릅니다.)로 CSS 변수에 접근하고 설정할 수 있는 방법은 다양합니다. 여기에서는 가장 쉽고 널리 사용되는 방법에 대해 알아보겠습니다.

  1. window.getComputedStyle() 함수를 사용하여 CSS 변수의 현재 값을 가져옵니다.
  2. document.querySelector() 함수를 사용하여 CSS 변수를 설정할 요소를 선택합니다.
  3. element.style.setProperty() 함수를 사용하여 CSS 변수에 값을 설정합니다.

아래는 자세한 설명을 포함한 순서별 예제 코드입니다.

index.html 설명

  • 아래 코드는 기본적인 HTML 문서입니다.
  • <link> 태그를 사용하여 style.css 파일을 불러옵니다. 이 파일에는 CSS 코드가 포함되어 있습니다.
  • .target-element 클래스를 가진 <div> 요소와 "Change Styles"라는 버튼이 있습니다.
  • script.js 파일을 불러오는 <script> 태그도 포함되어 있습니다.
HTML index.html 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript로 CSS 변수 제어하기</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="target-element">
            Hello, this is a text with dynamic styles!
        </div>
        
        <button type="button" id="changeStylesBtn">Change Styles</button>
        
        <script src="script.js"></script>
    </body>
</html>

style.css 설명

  • :root 선택자 아래에 --main-color와 --font-size라는 두 개의 CSS 변수를 정의합니다.
  • .target-element 클래스에 var() 함수를 사용하여 해당 변수들을 적용합니다. .target-element 클래스의 텍스트는 --main-color에 정의된 색상으로, --font-size에 정의된 크기로 표시됩니다.
CSS style.css 
:root {
    --main-color: blue;
    --font-size: 16px;
}
.target-element {
    color: var(--main-color);
    font-size: var(--font-size);
}
CSS :root 가상 클래스 선택자

script.js 설명

먼저 아래의 예제 코드를 살펴본 후 설명합니다.

JavaScript script.js 
// 1. CSS 변수의 현재 값을 가져오기 위해 window.getComputedStyle() 함수를 사용합니다.
const rootStyles = window.getComputedStyle(document.documentElement);
const targetElement = document.querySelector('.target-element');

const mainColorValue = rootStyles.getPropertyValue('--main-color');
const fontSizeValue = rootStyles.getPropertyValue('--font-size');

console.log(mainColorValue); // 출력 결과: "blue"
console.log(fontSizeValue); // 출력 결과: "16px"

// 2. "Change Styles" 버튼 클릭 시 CSS 변수 값을 변경하여 스타일을 동적으로 조작합니다.
document.getElementById('changeStylesBtn').addEventListener('click', () => {
    // 3. CSS 변수 값을 변경하기 위해 element.style.setProperty() 함수를 사용합니다.
    targetElement.style.setProperty('--main-color', 'red');
    targetElement.style.setProperty('--font-size', '20px');
});
  • window.getComputedStyle(document.documentElement)을 사용하여 :root 요소의 CSS 변수 값을 가져와 rootStyles에 저장합니다.
  • document.querySelector('.target-element')를 사용하여 .target-element 클래스를 가진 요소를 선택하고, 이를 targetElement 변수에 저장합니다.
  • rootStyles.getPropertyValue('--main-color')를 사용하여 --main-color 변수의 현재 값을 mainColorValue 변수에 저장합니다. getPropertyValue() 메서드를 사용하여 스타일 속성의 값을 가져옵니다.
  • rootStyles.getPropertyValue('--font-size')를 사용하여 --font-size 변수의 현재 값을 fontSizeValue 변수에 저장합니다.
  • 콘솔에 mainColorValue와 fontSizeValue를 출력하면 현재 CSS 변수 --main-color의 값은 "blue", --font-size의 값은 "16px"임을 확인할 수 있습니다.
  • "Change Styles" 버튼을 클릭하면 이벤트 리스너가 실행됩니다.
  • 이벤트 리스너 내에서 targetElement.style.setProperty() 함수를 사용하여 targetElement의 CSS 변수를 변경합니다.
  • 따라서 .target-element의 텍스트의 색상이 빨간색으로, 폰트 크기가 20px로 변경됩니다.

이제 해당 코드를 실행하면 페이지에 "Hello, this is a text with dynamic styles!"라는 텍스트와 "Change Styles" 버튼이 표시됩니다. "Change Styles" 버튼을 클릭하면 텍스트의 색상이 빨간색으로 변경되고, 폰트 크기가 20px로 변경되는 것을 확인할 수 있습니다. 이를 통해 자바스크립트로 CSS 변수를 접근하고 설정하여 동적으로 스타일을 조작하는 방법을 실습할 수 있습니다.

script.js에 사용한 함수 참조

아래는 예제 코드로 사용한 script.js에서 사용한 관련 함수 리스트입니다. 클릭하면 관련 주제로 링크됩니다.

HTML index.html 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript로 CSS 변수 제어하기</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="target-element">
            Hello, this is a text with dynamic styles!
        </div>
        
        <button id="changeStylesBtn">Change Styles</button>
        
        <!-- jQuery 라이브러리를 불러옵니다. -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

위 자바스크립트(Vanilla JS, 순수 자바스크립트)로 CSS 변수에 접근하고 설정하는 방법에 사용한 예제 코드를 제이쿼리(jQuery)로 CSS 변수에 접근하고 설정하는 방법으로 다시 설명하겠습니다.

CSS 변수 완벽 가이드
CSS style.css 
:root {
    --main-color: blue;
    --font-size: 16px;
}
.target-element {
    color: var(--main-color);
    font-size: var(--font-size);
}
Javascript - JQuery 
// 1. CSS 변수의 현재 값을 가져오기 위해 window.getComputedStyle() 대신 jQuery를 사용합니다.
const mainColorValue = $(':root').css('--main-color');
const fontSizeValue = $(':root').css('--font-size');

console.log(mainColorValue); // 출력: "blue"
console.log(fontSizeValue); // 출력: "16px"

// 2. "Change Styles" 버튼 클릭 시 CSS 변수 값을 변경하여 스타일을 동적으로 조작합니다.
$('#changeStylesBtn').on('click', () => {
    // 3. CSS 변수 값을 변경하기 위해 jQuery를 사용합니다.
    $('.target-element').css('--main-color', 'red');
    $('.target-element').css('--font-size', '20px');
    });

jQuery 코드 (script.js) 설명

jQuery를 사용하면 자바스크립트보다 간단하게 요소를 선택하고 스타일을 변경할 수 있습니다.

  • :root를 선택자로 사용하여 jQuery로 스타일을 접근합니다.
  • $('selector') 형식을 사용하여 요소를 선택합니다. :root 선택자 대신 $('.target-element')를 사용하여 .target-element 클래스를 가진 요소를 선택합니다.
  • jQuery의 css() 메서드를 사용하여 CSS 변수 값을 가져오고 설정합니다. css() 메서드를 사용하면 setProperty() 메서드를 사용하는 것보다 간편하게 CSS 변수를 조작할 수 있습니다.

위의 예제 코드를 실행하면 초기에는 "blue"와 "16px"가 콘솔에 출력되고, "Change Styles" 버튼을 클릭하면 텍스트의 색상이 빨간색으로, 폰트 크기가 20px로 변경되는 것을 확인할 수 있습니다. 이렇게 jQuery를 사용하여 CSS 변수를 접근하고 설정하면 동적인 스타일링을 더 간단하게 구현할 수 있습니다.

jQuery 코드에 사용한 함수 참조

아래는 예제 코드로 사용한 script.js에서 사용한 관련 함수 리스트입니다. 클릭하면 jQuery의 관련 문서로 링크됩니다.

참고문헌

같이 보기