跳至主要内容

[JS30] Day03: CSS Variables

keywords: CSS Variables, CSS變數, data-attribute​

建立 CSS 變數​

在原生的 CSS 中我們也可以使用變數的概念，相較於 CSS 前處理器（例如，SASS/SCSS），CSS 前處理器是在建立成 CSS 檔案前就把變數替代成真實的值了，所以當 SCSS 透過前處理器完成之後，這個 CSS 檔就是靜態無法透過修改變數來一次修改多個 style 屬性值，因此使用者是無法透過瀏覽器來修改變數的值。

但是使用 CSS 原生變數的話，則是可以透過 JavaScript 擷取，並動態修改變數值，而這個變數值一邊，所有套用這個變數的 Style 屬性值也都會連帶變更，也就是說可以讓使用者透過瀏覽器改變這個變數值，做到更多一次調整瀏覽器樣式的效果。

我們利用 :root{--<varName>: <varValue>} 來建立 CSS 的變數，並且在 CSS 屬性值中使用 var(--<varName>) 來代入變數的值：

/* 建立 css 變數 */
:root {
  --base: #ffc600;
  --spacing: 10px;
}

/* 使用 css 變數 */
img {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--spacing);
  background: var(--base);
}

利用 JS 動態改變 CSS 變數的值​

我們可以利用 document.documentElement.style.setProperty('--<varName>', '<varValue>') 來動態修改 CSS 變數的值，但要記得要加上單位（例如，px）：

document.documentElement.style.setProperty(`--${this.name}`, this.value + this.dataset.unit);

取得 data-attribute​

我們可以在 html 中利用 data attribute 設值

更多關於 html5 data attribute @ pjchender

<div class="tooltip" data-content="hello"></div>

在 JS 中我們可以使用 el.dataset 來取得 data-attribute 的值

const block = document.querySelector('.block');
console.log(block.dataset.content);

完成作品​

Day03: CSS Variables