JS30-03-CSS-Variables

利用 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 的變數

成品


See the Pen
JS30-Scoped CSS Variables and JS
by Bryan Hsaio (@bryan-hsaio)
on CodePen.

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");

filter 濾鏡

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


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

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";