Day3-課題內容

今天是JS30的第三天，這次的題目將會利用CSS變數，來變換我們頁面中照片的邊框大小、顏色以及模糊度。[1]
實作連結

CSS變數

透過將CSS屬性設定成變數，讓我們同時控制頁面中重複使用的CSS屬性，但為什麼要特別在CSS中使用變數呢？
在一個實際的網頁中，所使用到CSS屬性的數量是非常龐大的，且大部分的CSS屬性被重複使用的機率非常高。為了增加網站的維護性，CSS變數便是一個非常方便的工具。除此之外，使用變數另一個優勢，就是變數命名本身就包含了語義，使我們在讀code時，將會變得容易以及好理解。[2]

CSS變數的宣告，須先定義一個Scope，再將variable與值放入。局部的CSS變數，需要放在依element建立的局部區域中。全域的變數，則是放在:root這個區域底下。各個區域中的變數名稱前面皆需加上--：

//局部CSS變數宣告
element {
  --localVariable1: localValue1;
  --localVariable2: localValue2;
}
//全域CSS變數宣告
:root {
  --globalVariable1: value1
  --globalVariable2: value2
}

而CSS變數的取得，必須使用var(--variable)的特殊方法，而在var()中取得的變數，其名稱前面也需加上--：

//局部CSS變數取得
element {
  cssProperty1: var(--localVariable1);
  cssProperty2: var(--localVariable2);
}
//全域CSS變數取得
.demo{
   cssProperty1: var(--globalVariable1);
   cssProperty2：var(--globalVariable2)
}

設定CSS變數

在這次的頁面中，我們將會改變三種CSS屬性，因此我們需要3個變數，並分別給上對應<input>元素的值：

1. --spacing：代表圖片邊框的大小，因此先給上10px這個預設值。
2. --blur:代表圖片的模糊程度，為CSS的filter屬性中的一個功能，將會在下面進行介紹。
3. --color:代表圖片邊框的大小，在這裡也先給上預設顏色。

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

完成CSS變數設定之後，就可以透過var()，來取得這些變數屬性。特別注意到"JS"這兩個字的顏色，也會隨著邊框顏色做改變，因此也需要指定其字體顏色：

img {
      border: var(--spacing) solid;
      border-color: var(--color);
      filter: blur(var(--blur));
}

.hl {
    color: var(--color);
}

監聽事件

目前為止，我們已經成功將各元素的CSS屬性與變數連接，再來只要當<input>元素被調整時，將<input>元素的值指定給這些變數，如此一來便能在調整的同時，修改到對應的CSS屬性。
首先，我們在這邊分別監聽了三個<input>元素：

document.getElementById('spacing').addEventListener('input', widthChange);
document.getElementById('blur').addEventListener('input', imgBlur);
document.getElementById('base').addEventListener('input', colorChange);

影片中作者在這個地方，是同時監聽change + mousemove這兩個事件來達到點選拖曳的事件觸發，但這邊有一個更好用的監聽事件：oninput。
oninput 與 onchange，雖然都是監聽元素中值的改變，但是後者需要等到指定元素失去focus之後，元素內容值才會改變進而觸發，而前者則在focus當下就能觸發，因此可以簡單達到點選拖曳的事件觸發。[3]

撰寫函式

最後在監聽事件後的觸發函式中，將<input>元素的值，透過document.documentElement.style.setProperty(property, value)指定給三個CSS變數。如此一來，對應的CSS屬性值就會跟著變動：

function widthChange (event) {
    let newWidth = event.target.value;
    document.documentElement.style.setProperty('--spacing', `${newWidth}px`);
};
function imgBlur(event) {
    let newBlur = event.target.value;
     document.documentElement.style.setProperty('--blur', `${newBlur}px`);
};
function colorChange (event) {
    let newColor = event.target.value;
    document.documentElement.style.setProperty('--color', `${newColor}`);
};

CSS filter屬性

CSS中的filter屬性，就如同他的字面意思"濾鏡"，他可以將指定的元素(大部分為<image>)，做出不同視覺上的效果。[4]

filter: filterFunction(value);

我們在這主題中所使用到的，就是filter屬性中的blur()功能。透過修改其屬性值，使我們的圖片達到不同的模糊程度。而CSS filter中總共含有十種功能，每一種功能都有他獨特的特效：

1. blur(px)[模糊]
2. brightness(%)[亮度]
3. contrast(%)[對比]
4. drop-shadow(h-shadow v-shadow blur spread color)[陰影]
5. grayscale(%)[灰階]
6. hue-rotate(deg)[色相旋轉]
7. invert(%)[負片]
8. opacity(%)[不透明度]
9. saturate(%)[飽和]
10. sepia(%)[懷舊]

這邊提供一個參考網站，我們可以在裡面直接修改filter屬性中的各種功能，進而看到頁面上圖片所產生的特效。[5]

總結

在今天的時鐘課題當中，我們學到以下的技能：

1. CSS變數
2. input事件與change事件
3. CSS filter屬性

以上是今天JS30-Days的心得內容，感謝您的閱讀。

參考資料

1. javascript30
2. MDN-CSS Variables
3. w3schools oninput event
4. w3school CSS filter Property
5. CSS Filter Effects