2020-01-05
정리
: Javascript30을 공부한 내용 기록
CSS var()은 변수를 설정할 수 있다.
이 때 root
단위에서 값을 설정하고 변경할 수 있다.
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
background: var(--base);
padding: var(--spacing);
filter: blur(var(--blur));
}
root
에 위치한 CSS 변수는 다음과 같이 변경할 수 있다.
spacing.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty(
'--spacing',
spacing.value + e.target.attributes['data-sizing'].value
);
});
blur.addEventListener('mousemove', (e) => {
document.documentElement.style.setProperty(
'--blur',
blur.value + e.target.attributes['data-sizing'].value
);
});
base.addEventListener('change', (e) => {
document.documentElement.style.setProperty('--base', base.value);
});
👋