Javascript 로 CSS 변수 값 조절하기

 

Javascript에서 CSS 변수 다루는 방법을 한번 알아봅시다~ 

 

먼저, CSS 변수선언은 아래와 같이 보통 :root에 선언합니다.

하위 선택자들이 모두 사용할 수 있도록 하기위함입니다.

 

 

 

1. CSS 내에 변수 선언하기, CSS에서 사용하기

// 변수선언
:root {
	--primary : tomato; 
 }
 
 
 // 변수의 값을 사용할때에는 var() css메소드 사용
 .wrap {
 	color:var(--primary)
 }

 

 

 

2. Javascript에서 CSS의 변수값을 가져오기

const docs = document.documentElement; 
const value = getComputedStyle(docs).getPropertyValue('--primary') 

console.log(value) // 'red'

 

이때에 window.getComputedStyle() 이렇게 써도되지만, 대부분의 javascript method는 window를 생략하고 써도 괜찮습니다.

window.alert() => alert() 이렇게 줄여서 쓰는 것처럼요.

 

또한, getComputedStyle(element)의 매개변수인 element는 특정 html 태그를 불러들인 변수를 넣어도 되고,

위의 예제처럼, 문서 전체를 나타내는 documentElement를 불러도 됩니다. 

 

 

3. Javscript로 CSS 변수값 수정하기

docs.style.setProperty('--primary', 'blue');

 

위와 같이 하면, css 변수의 값을 바꾸며, 저 변수를 선언받은 Selector인  .wrap의 글자색이 'red'에서 'blue'로 바뀝니다.

 

4. 예제로 풀어보기

아래 예제는 변수로 투명도를 지정해 놓고, 버튼을 클릭하면 투명도가 0.1씩 올라가는 예제입니다. 

0.1씩 더해도 어느 순간에는 javascript가 소숫점을 많이 만들어 버립니다.

하여 소숫점 한자리수를 만들기 위해 Math() 메소드를 같이 사용했습니다.

 

또한, css에서 value값을 가져오면 문자열(String) 타입으로 가져오기때문에, 연산을 위해 숫자(Number)형 데이터로 변경하였습니다.

Number(string) 또는 +String 둘다 가능합니다.

 

한번 따라해 보시고, 궁금한 점은 댓글로 남겨 주세요^^

 

See the Pen Untitled by Jey Lee (@Jey-Lee-the-sasster) on CodePen.