iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0

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
oninputonchange,雖然都是監聽元素中值的改變,但是後者需要等到指定元素失去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

上一篇
JS30-Day2-JS and CSS Clock
下一篇
JS30-Day4-Array Cardio
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言