[程式碼&DEMO] [HackMD完整筆記]

目標

用JS與CSS去作一個即時的濾淨效果(調整內距、模糊、邊框色)。

步驟流程

學習筆記

CSS 變數

可在:root命名變數，變全域的變數，也可在任意的選擇器內命名變數。
變數命名的規則為：- -變數名
在要呼叫變數的選擇器裡面，使用var()呼叫該變數，可以把它想成 function。

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

利用 JavaScript 讀寫 CSS 變數

讀取：getPropertyValue()
寫入：setProperty()

.setProperty()

語法:

style.setProperty(propertyName, value, priority);

參數:

propertyName : 一定要有，一個DOMString ，代表被更改的CSS屬性。

value: 一個DOMString，表示新的屬性值。如果没有指定，則當作空字符串。

priority : 一個DOMString 可設置 "important" CSS 優先级。如果没有指定，則當作空字符串。

程式碼

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);  
/* 等同於 */
style.`--${this.name}`= this.value + this.dataset.sizing;

//////////* EXample: *///////////
<style>:root {--blur: 10px;}<\style>

style.setProperty('--blur', '15px');
/* 等同於 */
<style>:root {--blur: 15px;}<\style>

:root

這個偽元素匹配的是文檔的根元素，也就是 標籤。常用於聲明全局的 CSS 變量。

dataset

用dataset可以取出對象的data-*屬性，也等同於getAttribute。

程式碼

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

function handleUpdate() {const suffix = this.dataset.sizing || '';}
//也等於function handleUpdate() {const suffix = this.getAttribute('data-sizing')||'';}            

filter:blur()

CSS3的濾鏡功能，blur是高斯模糊，參數越高越模糊。

querySelectorAll()

回傳文檔中指定CSS選擇器的所有符合的元素，回傳的是一個靜態的 NodeList。

NodeList 和 Array 的區别

NodeList有length屬性，打開 proto 查看它的方法，有forEach()、item()、keys()、values()、entries()。但沒有Array 的 prototype 中才有的 map()、pop() 等方法。

箭頭函式（Arrow Function）

箭頭函式的this指向在【定義的時候】繼承自外層第一個普通函式的this。
外層沒有普通函式繼承，它this指向 window (全域性物件) 。

更多參考: http://xbhong.top/2018/04/10/arrowFunction/