JS30-03-CSS-Variables

發表於 | 分類於 ， | 0 comments

利用 CSS變數 與 JS 即時更新圖片的 內距、邊框色、模糊 效果

目標

  • 使用 CSS變數 功能
  • 透過 JS 更改 CSS變數值，達到即時更新 內距、邊框色、模糊 的效果

實踐步驟

  1. 在 CSS 的 :root 宣告 CSS變數

    • 宣告方法：使用兩個-符號，代表「變數」，如：--spacing
    • 使用方法：使用var()代表「使用變數」，如：var(--spacing)

  2. 分別監聽(change、mousemove)三個 input 的值

    • 利用 dataset 取得自定義的資料，如：this.dataset.sizing
    • 透過 document.documentElement.style.setProperty('--base', '#fff'); 更改CSS的變數

成品

[DEMO] | [GitHub]

CSS學習紀錄

使用 CSS的變數 功能，不過在 IE 上，好像還不支援。

CSS變數說明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 在CSS 的 :root(全局)設定 變數 */
:root {
    --base: #ffc600;
    --spacing: 50px;
    --blur: 10px;
}

/* 使用CSS變數方法：var(變數名稱) */
img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));  /* CSS濾鏡效果：模糊 */
}

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

:root 偽元素(全局)

:root 這個偽元素是文檔的根元素，等同於 <html> 標籤，所以常用於聲明全局的CSS變量：

設定變數(全局)
1
2
3
：root {
   --color：#fff ;
}

在CSS style要使用時，用 var(變數名稱)，如下：

在CSS使用變數
1
2
3
img {
   background： var(--color);
}

若是要在 JS 使用的話，語法如下：

用JS更改CSS變數
1
2
// ：root = 文檔的根元素 = <html> = document.documentElement
document.documentElement.style.setProperty('--color', '#000');
CSS Variables

filter 濾鏡

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

MDN-filter

JS學習紀錄

dataset

利用 dataset 可取得自定義的資料，另外也可使用 getAttribute 取得資料。

HTML
1
<input id="blur" type="range" name="blur" value="10" data-sizing="px">
JS取得dataset
1
2
3
4
5
6
//方法1
document.querySelector('#blur').dataset.sizing  // 輸出：px
document.querySelector('#blur').dataset[sizing] // 輸出：px

//方法2
document.querySelector('#blur').getAttribute('data-sizing'); // 輸出：px
MDN-dataset

style.setProperty

下列三種方法，皆可達到修改CSS的效果，不過實務上用方法2，會比較容易帶 參數 及 可讀性 較佳。

修改CSS
1
2
3
4
5
6
7
8
9
10
const DOM = document.querySelector('img');

//方法1
DOM.setAttribute("style", `padding: 10px`)

//方法2
DOM.style.setProperty('padding', '10px');

//方法3
DOM.style.padding = '10px';
MDN-setProperty