| css 변수는 반복되는 속성과 속성을 한꺼번에 변경하고 싶을때 사용하는 유용한 사용자 정의 속성이다. 사용 방법이 간단하면서도 강력하다. css var를 사용하면 변수를 업데이트 하는것만으로도 요소가 자동으로 업데이트 된다. var 사용법: "--" 접두어로 시작해야 한다. 단어 구분은 관례상 "--"로 한다. 전역으로 설정시 :root를 사용한다. :root { --my-var: 30% } 사용예: width를 var 변수 "--my-var"로 선언한다. :root {
--my-var: 30% } .main-title { background-color: gold; width: var(--my-var); } 폴백을 줄수도 있다. --my-var이 선언 안되어 있다면 다음과 같이 0%로 설정 한다. width: var(--my-var, 0%); 자바스크립트에서 사용법// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue('--my-var'); // 어느 곳에서나 변수 얻기 getComputedStyle(element).getPropertyValue('--my-var'); // 인라인 스타일에 변수 설정하기 element.style.setProperty('--my-var', '30%'); 실제 사용법var 값을 최초로 가져올때는 getComputedStyle로 가져와야 한다.최초에 document.documentElement.style.getPropertyValue로 값을 가져오면 값이 안넘어 온다. 처음에 값을 얻어 올때 getComputedStyle로 읽고, setProperty로 값을 지정한다. setProperty로 값을 지정하면 getPropertyValue로 값을 읽을 수 있게 된다. let el = document.querySelector('.main-title');
let width = window.getComputedStyle(el).getPropertyValue('--my-var'); setProperty로 지정한 값은 getPropertyValue 함수로 가져올수 있다. document.documentElement.style.setProperty('--my-var', '90%');
let width = document.documentElement.style.getPropertyValue('--my-var'); console.log( 'testVar2 end width "%s"', width); 다운로드: var_test.html my.css 실행 방법 : 1. 'Enger' 키를 누르면 width가 줄어든다. 2.. '1' 키를 누르면 width가 늘어난다. 참고) https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties |