Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- node.js
- 자바스크립트
- API
- heroku
- HTML
- DART
- frontend
- nodejs
- clonecoding
- CLONE
- GRID
- Flutter
- MongoDB
- javscript
- 리액트
- form
- JavaScript
- pug
- TypeScript
- ECMAScript
- CSS
- ES6
- Session
- backend
- graphQL
- express
- react
- NextJs
- Mongoose
- Component
Archives
- Today
- Total
목록setProperty (1)
Enjoy Programming

이번에는 css variable을 select해서 자바스크립트 이벤트로 변화를 줘보는 스타일을 구현해본다. 먼저 백그라운드 사이즈와 블러 그리고 컬러를 변화를 줄 수 있도록 세개의 input을 만들어서 값을 설정해주고 각각의 네임을 지정해준다. 그리고 dataset을 이용할 수 있도록 data-sizing을 지정해준다. 그리고 css variable을 만들어서 내가 적용할 부분에 각각 적용해 준다. 이제 자바스크립트로 셀렉트해서 변경만 해주면 되는데 queryselectorAll을 이용해 input을 모두 select해주고. forEach를 이용해서 이벤트 리스너를 적용해주는데 inputs는 array가 아니라서 map이 적용이 안된다. proto type을 보면 nodelist로 나온다. 뭐 sprea..
JavaScript/Vanilla Js
2021. 7. 22. 11:23