javascript30 - 03 - CSS Variables

초기화면
결과 화면

---

요구사항

• misc styles, nothing to do with CSS variables : CSS부분을 변경하지 않고 js를 통해서 변경해라

1. Spacing 슬라이더가 변경되면 range만큼 사진의 border을 설정해야한다.
2. Blur 슬라이더가 변경되면 range만큰 사진의 blur정도를 조절해야한다.
3. Base Color 색상편집기에서 색상 선택한 색상으로 테두리의 색상과 위와같이 글자 JS의 색상을 변경해주어야 한다.

---

결과 코드

window.onload = () => {
  document.querySelector(
    "img"
  ).style.border = `${changeSpacing()}px solid ${getColor()}`;
  changeBlur();
};
const changeSpacing = () => {
  var space = document.querySelector("#spacing").value;
  document.querySelector("img").style.borderWidth = `${space}px`;
  return space;
};
const changeBlur = () => {
  var blur = document.querySelector("#blur").value;
  document.querySelector("img").style.filter = `blur(${blur}px)`;
};
const getColor = () => {
  var color = document.querySelector("#base").value;
  document.querySelector("img").style.borderColor = `${color}`;
  document.querySelector(".hl").style.color = `${color}`;

  return color;
};

// range 는 움직일때 input 으로 감지함
// change 이벤트로 하니까 바를 움직이는 동안에는 변화가 감지되지 않는 문제가 있었다.
document.querySelector("#spacing").addEventListener("input", changeSpacing);
document.querySelector("#blur").addEventListener("input", changeBlur);
// click으로 하였더니 선택하기 전 color을 가져오더라
// change후에 선택된 색상을 받아와 테두리의 색깔을 바꾸어주어야 한다.
document.querySelector("#base").addEventListener("change", getColor);

---

후기

앞에서 했던 1,2에 비해 쉬운 편이어서 큰 어려움 없이 완성할 수 있었다.

• range는 움직일떄 input이벤트로 감지하면 부드럽게 감지해서 색상, 흐림을 변경할수있다.
• blur은 css의 filter속성을 이용하여 변경할수 있다. filter