Day 3 – CSS Variables

 成品連結：CSS Variables

第三天我們要來利用 JS 操作 CSS，同時也會用到 CSS 內建的變數功能 (類似 SASS/SCSS 的變數功能)。

事前準備
步驟
監聽各個元素
當 input 改變時重新渲染 html
HTML & CSS 程式碼

開始寫程式碼
使用 CSS 變數
這裡可以看到在 CSS 使用了變數，但要注意較舊的瀏覽器可能會有支援度的問題(像是 IE 就完全不支援)

/* 宣告變數 */
:root {
–base: #ffc600;
–blur: 10px;
–padding: 10px;
}

/* 使用變數 */
img {
padding: var(–padding);
background-color: var(–base);
filter: blur(var(–blur));
}
使用時要先用:root這個選擇器，其實就等於選擇了html tag，宣告時要再變數前加上–；而使用時要用var()包住該變數

加上 javaScript
這裡使用了三個input來控制padding、blur、以及base，所以我們要來監聽當 handler 值改變時的事件；事件的選擇可以使用change，但缺點是要等鬆開滑鼠按鍵後才會觸發事件，沒辦法隨著拖曳時改變畫面狀態，但我後來發現input可以做到！不只可以用在range，也能用在其它類型的input上，可以在下方參考資料[4]看更多介紹。

const inputs = document.querySelectorAll(‘.controls input’);

// 分別在各個 input 設定監聽事件
inputs.forEach(cur => {
cur.addEventListener(‘input’, function(e) {
// code here
});
});
接著我們要讀取input[type=”range”]以及input[type=”color”]的值。在 html 中可以看到我們已設定最大、小值 & 預設值，並透過element.value來讀取值

inputs.forEach(cur => {
cur.addEventListener(‘input’, function(e) {
// 讀取 input 中的值並儲存在變數 value 中
let value = cur.value;
});
});
接著判斷如果選擇的是blur、padding或是base，會分別改變 CSS 變數中的值，這裡透過setProperty來修改 CSS 變數內容

inputs.forEach(cur => {
cur.addEventListener(‘input’, function(e) {
// 讀取 input 中的值並儲存在變數 value 中
let value = cur.value;
// 判斷 input 的 id 並改變 CSS 變數的內容
if(e.target.getAttribute(‘id’) === ‘base’) {
document.body.style.setProperty(‘–base’, `${value}`);
} else if (e.target.getAttribute(‘id’) === ‘blur’) {
document.body.style.setProperty(‘–blur’, `${value}px`);
} else if(e.target.getAttribute(‘id’) === ‘spacing’) {
document.body.style.setProperty(‘–padding’, `${value}px`);
}
});
});
到這裡程式已可正常運作啦～接下來如果要再改進我覺得可以修改一下寫法寫得簡潔一些，不然重複的 code 其實有點多有點糙啊…