今日任務:
拖動橫軸可以調整圖片的邊框大小、模糊程度和改變顏色

HTML

拖拉軸
<input type="range" min="10" max="200" value="10">
顏色選取器
<input type="color" value="#ffc600">

CSS 原生變數(CSS Variables)

1.宣告CSS變數

  :root {
            --base: #ffc600;
            --spacing: 10px;
            --blur: 10px;
        }

2.使用CSS變數

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

JS

選取到input元素

const inputs = document.querySelectorAll(".controller input")

添加監聽事件

change是選擇後放開才執行
mousemove是選擇過程中一直執行

inputs.forEach(input=>{
  input.addEventListener('change',imgChange)
  input.addEventListener('mousemove',imgChange)
})

修改css變數的值

Document.documentElement會回傳目前文件（document）中的根元素（Element）
document.documentElement.style.setProperty(propertyName, value)可用來修改css變數的值

所以

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

發現沒有作用，要在加上後綴字(單位)才行

suffix後綴

dataset可以選取到所有data-開頭的東西，如果要指定哪一個的話再加上".名字"
例如:this.dataset.name

const suffix = this.dataset.unit || ''

function imgChange(){
  const suffix = this.dataset.unit || ''
  document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)
}

今日學習到的:

• HTML:拖拉軸、顏色選取器
• CSS 原生變數(CSS Variables)
• 監聽事件:change、mousemove
• JS修改css變數的值(要加上單位)
• dataset

效果連結:連結

參考連結:
https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement