[JS30] -3) CSS Variables

🧊 HTMLElement: input event

각 input 태그의 값들이 변경될 때마다 이벤트를 호출하기 위해서는 이벤트 조건을 input으로 지정하면 된다.

🧊 blur

filter-function의 옵션 중 하나가 blur이기 때문에, 다음과 같이 지정하면 된다.

filter: blur(4px);

🧊 Code

내가 작성한 코드는 다음과 같다.
각각 인풋태그에 input이벤트를 등록했고,
js에서 input값이 업데이트될때마다 받아온 event.target.value값으로 직접 해당 css속성을 업데이트 하도록 했다.

const $spacing = document.querySelector("#spacing");
const $image = document.querySelector("#img");
const $blur = document.querySelector("#blur");
const $baseColor = document.querySelector("#base");
const $background = document.querySelector(".background");

$spacing.addEventListener("input", handleSpacing);
$blur.addEventListener("input", handleBlur);
$baseColor.addEventListener("input", handleBaseColor);

function handleSpacing (ev) {
  const spacingVal = ev.target.value;
  $image.style.margin = `${spacingVal}px`
}

function handleBlur (ev) {
  const blurVal = ev.target.value;
  $image.style.filter = `blur(${blurVal}px)`
}

function handleBaseColor (ev) {
  const colorVal = ev.target.value;
  $background.style.backgroundColor = `${colorVal}`
}

결과

*color 인풋 창이 화면밖으로 잘려나가 보이지 않는다. 이 점 참고!

Reference

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/input_event

https://developer.mozilla.org/ko/docs/Web/CSS/filter-function/blur()

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp