[CSS] JS에서 CSS 변수(사용자 정의 속성) 설정하는 방법

// element.style.:propertyName = propertyValue
element.style.setStyle('--variantName', variantValue)

element.style.:propertyName 하려고 console에 찍어보니 나오지 않아 당황했다.

style의 setStyle 함수를 이용하여 설정해주면 된다. 간단

 

box {
    --rotation: 0;
    transform: rotate(calc(var(--rotation) * 1deg));
}

const box = document.querySelctor('.box') // 방법1
// const box = document.getElementByClassName('box') // 방법2

box.style.setStyle('--rotation', 30)

 

 

https://nykim.work/2

[JS30] 자바스크립트로 CSS 변수(사용자 정의 속성) 조절하기