day03: CSS Variable

 使用者操作需求
分別操作Spacing,Blur滑動桿以及調色盤，來即時變更圖片的padding,filter以及主題色

技術重點
利用JS來控制CSS變數
CSS變數設定 :root { –baseColor: yellow }
CSS設定變數為值 .className { color: var(–baseColor) }
使用 .dataset.* 取得HTML data-*屬性
返回style標籤 document.documentElement.style
設定CSS屬性 style.setProperty
流程步驟
利用CSS變數設定樣式
JS選取所有的input控制桿
對控制桿添加監聽，並且設定兩種觸發事件change & mousemove
觸發時更新到CSS變數
範例語法備註
[ :root ]
CSS變數設定 :root { –baseColor: yellow }
CSS設定變數為值 .className { color: var(–baseColor) }
:root {
–base: #ffc600;
–spacing: 10px;
–blur: 10px;
}

img {
padding: var(–spacing);
background: var(–base);
filter: blur(var(–blur));
}

.hl {
color: var(–base);
}
[ element.dataset() ]
HTML5 data-* 在第一篇有講到
這邊講的是利用.dataset選取對象的data-*屬性，跟getAttribute很像
但是dataset還能抓到data字串，getAttribute試了一下好像無法

<div id=”test” data-no=”123″ data-name=”yy” data-time=”00:00″></div>

// 輸出 {no: “123”, name: “yy”, time: “00:00”}
document.querySelector(‘#test’).dataset

// 皆輸出123
document.querySelector(‘#test’).dataset.no

document.querySelector(‘#test ‘).getAttribute(‘data-no’);

範例code使用 const suffix = this.dataset.sizing || ”;
如果變數不一定取的到值的話可以多加一個空值

[ style.setProperty() ]
等同於 cssPropertyName
style.setProperty(‘padding’, ’15px’);
style.padding = ’15px’;

範例code中 將input的name屬性 命名為CSS屬性名稱來做呼應

document.documentElement.style.setProperty(`–${this.name

}`, this.value + suffix);