CSS에서 JavaScript를 사용하여 변수를 변경

변수를 JavaScript로 변경

CSS 변수는 DOM에 접근할 수 있으므로, JavaScript를 통해 변경할 수 있습니다.

이 예제는 --blue 변수를 표시하고 변경하는 스크립트를 생성하는 방법을 설명합니다. 현재 JavaScript에 익숙하지 않다면 걱정하지 마세요. JavaScript에 대한 더 많은 지식을 JavaScript 교육 강좌에서 배울 수 있습니다:

예제

<script>
// 루트 요소 가져옴
var r = document.querySelector(':root');
// 변수 값을 가져오는 함수 생성
function myFunction_get() {
  // 루트의 스타일(속성과 값)을 가져옴
  var rs = getComputedStyle(r);
  // --blue 변수의 값을 알림
  alert("--blue의 값은: " + rs.getPropertyValue('--blue'));
}
// Create a function to set the value of the variable
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

직접 시험해보세요

브라우저 지원

표中的数字注明了完全支持该属性的首个浏览器版本。

함수
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 함수

함수 설명
var() CSS 변수 값을 삽입하세요。