Let’s control the variables in css

root 가상 클래스

:root {
    --baseColor: #ffc600;
    --spacing: 10px;
    --blurValue: 10px;
}

img {
    padding: var(--spacing);
    background-color: var(--baseColor);
    filter: blur(var(--blurValue));
}

.hl {
    color: var(--baseColor);
}

css의 default 값을 설정해야한다.

querySelector

querySelectorAll은 NodeList을 반환한다. (배열 아님) querySelector로 class 안의 tag도 가져올 수 있다.

js 파일은 실행파일이 아니다!

window.onload = function() {
    const inputs = document.querySelectorAll('.controls input');
    inputs.forEach(input => input.addEventListener('change', handleUpdate));    
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
};

window.onload 관련 문서

window.onload 안에는 실행 파일들을 올리면 잘 실행된다.

this.dataset

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>
function handleUpdate() {
    console.log(this.dataset);
}

DOMStringMap 객체를 반환한다. data-sizing이 포함 data-_anything _anything 이름으로 반환한다.

const suffix = this.dataset.sizing || '';

논리연산자

suffix에 dataset.sizing을 넣는다. 만약 없다면 ‘‘을 넣는다

color가 dataset.sizing이 없다. dataset.sizing

여기서 suffix는 접미사, 단위 역할을 하는 친구

Now, we’re gonna change the variables in css

function handleUpdate() {
    const suffix = this.dataset.sizing || '';
    console.log(this.name);
}

document.documentElement

document

document.documentElement.style

setPropertyDocument

setPropertyDocument

첫번째 인자의 값을 두번째 인자로 바꾼다.

Inspect 창에서 element에서 확인할 수 있다. name과 :root에 만든 변수이름을 동일하게 하면 아주 손쉽게 값을 변경할 수 있다.

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

뒤에 data-sizing을 추가!

$ 과 ` 을 이용하여 element의 이름을 가져오고 변수를 이름과 동일하게 했기 때문에

댓글남기기