【JS30】Day03:JS Playing with CSS Variables

javascript 30day

目標:讓使用者可調整邊距顏色、寬度,及模糊度

JS Playing with CSS Variables and JS Day03

一、將欲改變的屬性命名 css 變數

:root {
–base: #ffc600;
spacing: 50px;
blur: 10px;
}
// 變數命名

img {
padding: var(–spacing);
background-color: var(–base);
filter: blur(var(–blur));
}
// 呼叫變數

二、監聽 input

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
const suffix = this.dataset.sizing || '';
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
// 使用 document.documentElement.style.setProperty('變數名稱', '數值');
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

使用技巧

  • css variables
  • data-attribute
  • forEach
【JS30】Day04:Array Cardio Day 1 【筆記】 如何寫出好註解

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×