Css variable 을 select해서 자바스크립트 적용하기

이번에는 css variable을 select해서 자바스크립트 이벤트로 변화를 줘보는 스타일을 구현해본다.

먼저 백그라운드 사이즈와 블러 그리고 컬러를 변화를 줄 수 있도록 세개의 input을 만들어서 값을 설정해주고 각각의 네임을 지정해준다.

그리고 dataset을 이용할 수 있도록 data-sizing을 지정해준다.

 

그리고 css variable을 만들어서 내가 적용할 부분에 각각 적용해 준다.

 

이제 자바스크립트로 셀렉트해서 변경만 해주면 되는데

queryselectorAll을 이용해 input을 모두 select해주고.

forEach를 이용해서 이벤트 리스너를 적용해주는데 inputs는 array가 아니라서 map이 적용이 안된다. proto type을 보면 nodelist로 나온다. 뭐 spread를 이용해 다른 어레이에 담아서  map으로 이용할 수 있겠으나 일단 이렇게 진행.

 

suffix에 타겟의 dataset을 담아주고.  body가 아닌 documentElement를 이용하는데 Document.documentElement 는 읽기 전용 속성으로 문서의 루트 요소를 나타내는 Element를 반환한다고 한다. 내가 이해하기로는 variable도 root에 설정해주기 때문에

다큐먼트의 최상위에서 선택해주는? 것으로 생각된다. 

 

그리고 setproperty() 메소드를 이용해주는데.

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

CSSStyleDeclaration.setProperty() - Web APIs | MDN

해당 메소드는 CSS스타일 프로퍼티에 대한 새값을 선언하는 함수이다. 파라미터에 해당 프로퍼티의 이름이 먼저들어가고 value를 지정해준다. 

각 인풋의 name이 들어갈수 있도록 템플릿 리터럴을 이용해서 선택되는 해당 target의 이름을 지정해주고

value에는 해당 target의 벨류에  + suffix를 지정해준다~ suffix는 기존에 지정한 data-sizing인 해당 px이나 다른 meta값들이다. 이렇게 적용해주면 인풋바를 움직이면 css variable의 변화를 줄수있고 해당  css가 적용된 태그에 이벤트가 적용이 된다.

그리고 살펴보면 해당 이벤트가 진행되면 root에 variable의 변화가 감지되는데

만약 아래쪽에서 직접 static한 값을 지정해주면~ 아래쪽이 적용되기에 변화값은 적용이 안된다~

 

요기까지~ 좋은거 배웠다.