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