Day03 -- CSS Variables

第 12 屆 iThome 鐵人賽

DAY 3

Modern Web

森林系工程師之開始工作才學JS?!系列第 4 篇

12th鐵人賽

lukechu

團隊對不起，你是個好人，但我們只是網友

2020-09-16 13:26:07

1060 瀏覽

分享至

目標

今天要來學習的是CSS變數，透過JS變更CSS變數，改變圖片的paddind(元素內距), background color(元素背景色), blur(圖片模糊)

Step1

/* 宣告CSS全域變數 */
:root {
	--base: #ffc600;
	--spacing: 10px;
	--blur: 10px;
}

img {
	padding: var(--spacing);
	background: var(--base);
	filter: blur(var(--blur));
}

.hl {
	color: var(--base);
}

:root 是CSS偽類（pseudo-class），用於選取HTML根元素，也就是<html>，可以用來宣告CSS的全域變數。

CSS variables，建立方式是在變數名稱前加上—-；

使用時，在屬性值的地方使用關鍵字 var( )，括弧中填入變數

Step2

const inputs = document.querySelectorAll('.controls input');

function handelUpdate() {
    const suffix = this.dataset.sizing || '';
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handelUpdate)); //更改數值時觸發事件
inputs.forEach(input => input.addEventListener('mousemove', handelUpdate)); //滑鼠移動時觸發事件

element.dataset，回傳元件的自訂資料屬性（data-*），物件形式

style.setProperty()，設定css屬性值（屬性名, 屬性值）

Document.documentElement 會回傳目前文件（document）中的根元素（Element），如：HTML 文件中的 <html> 元素。