跳至主要内容

[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