3. CSS 전역변수!

 

전역변수를 선언하고 그것을 JS로 조작하는 방법에 대해서 다루겠습니다.

HTML and CSS

제가 조작할 값은 전체 화면의 주요 색, 이미지의 padding(Spacing), filter값입니다

입력을 3개를 두고 값을 변화를 통해 전체 변수를 조작하여 UI 변화를 조작하는 것입니다

컨트롤러인 input에 각각 커스텀속성을 주어서 suffix를 붙일 수 있도록 하였습니다.

JavaScript 설명

const inputControllers = document.querySelectorAll(".controls input");

const valueUpdate = (e) => {
	// suffix 판별
	const suffix = e.target.dataset.sizing || ""; 
	document.documentElement.style.setProperty(
      `--${e.target.name}`,
      e.target.value + suffix
    );
};
// 컨트롤러의 change 이벤트
inputControllers.forEach((input) => {
  input.addEventListener("change", valueUpdate);
});
// 컨트롤러의 mousemove 이벤트
inputControllers.forEach((input) =>
  input.addEventListener("mousemove", valueUpdate)
);

JS에서 document.documentElement.style.setProperty 을 통해 우리는 전역 CSS변수 값을 조작할 수 있습니다. 

 

시연 및 결과물

See the Pen Untitled by jun (@nate1994) on CodePen.

회고

1. 커스텀속성을 통해 selecAll한 요소들을 판별할 수 있다.

2. 전역 CSS속성에 접근하는 방법