啊呀 寫一半忘記存草稿就關電腦了ＱＱ

使用者操作需求

分別操作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

流程步驟

1. 利用CSS變數設定樣式
2. JS選取所有的input控制桿
3. 對控制桿添加監聽，並且設定兩種觸發事件change & mousemove
4. 觸發時更新到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);