CSS Variables (CSS 變數)

這次認識到 input 裡更多的 type 屬性 range 、 color 因為平常不太會用到 所以特別去查了一下 原來是 html5 裡新增的屬性 可參照 HTML5 input type 屬性

摘要

• 了解 css 變數
• 利用 js 綁定監聽 input 變動的值 對應到頁面中的 img 元素 達到即時調整的效果

css 變數宣告

//宣告變數
:root {
  --base: #70653e;
  --spacing: 10px;
  --blur: 10px;
}

//在使用時
img {
  padding: var(--spacing);
  background: var(--base);
  filter: blur(var(--blur));
}

CSS 變數宣告可參照 引人注目的 CSS 變數（CSS Variable） 有更詳細的解說

這次是使用 filter CSS 濾鏡 更多 css 濾鏡介紹 MDN-filter CSS-Tricks_filter

JS

利用 addEventListener 偵聽事件

dataset 獲取 data 值 相當於 getAttribute

const suffix = this.dataset.sizing || '';
//const suffix = this.getAttribute('data-sizing') || '';

MDN-HTMLElement.dataset MDN-Element.getAttribute()

使用setProperty 可以在 js 裡 把 css 屬性當做變數

document.documentElement.style.setProperty('padding', '10px');
// document.documentElement.style.padding = '10px';

MDN-CSSStyleDeclaration.setProperty()

• js 裡 寫 css 的 style 需要再手動加上單位，它並不會像 jquery 這麼人性化的自動幫你加上哦 (雷～

後記

可以在 css 裡使用變數算蠻新的使用方式 瀏覽器目前還沒那麼泛用，且通常都在 scss 裡就把變數處理掉了 所以目前處於知道就好的狀態

YOUTUBE 影片教學連結