JS30 Day03
以前學切版時很少使用 CSS 變數,這堂課用 CSS 變數 + JS 來即時改變畫面,才發現它非常實用,以後要多加利用!


CSS Variables and JS

完成目標

  • 功能
    • 拉動、點擊
  • 畫面
    • 改變控制項會立即改變畫面



index-START.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scoped CSS Variables and JS</title>
</head>
<body>
<h2>Update CSS Variables with <span class="hl">JS</span></h2>

<div class="controls">
<label for="spacing">Spacing:</label>
<input
id="spacing"
type="range"
name="spacing"
min="10"
max="200"
value="10"
data-sizing="px"
/>

<label for="blur">Blur:</label>
<input
id="blur"
type="range"
name="blur"
min="0"
max="25"
value="10"
data-sizing="px"
/>

<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600" />
</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />

<style>
/*
misc styles, nothing to do with CSS variables
*/

body {
text-align: center;
background: #193549;
color: white;
font-family: "helvetica neue", sans-serif;
font-weight: 100;
font-size: 50px;
}

.controls {
margin-bottom: 50px;
}

input {
width: 100px;
}
</style>

<script></script>
</body>
</html>

index-FINISHED.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Scoped CSS Variables and JS</title>
</head>
<body>
<h2>Update CSS Variables with <span class="hl">JS</span></h2>

<div class="controls">
<label for="spacing">Spacing:</label>
<input
id="spacing"
type="range"
name="spacing"
min="10"
max="200"
value="10"
data-sizing="px"
/>

<label for="blur">Blur:</label>
<input
id="blur"
type="range"
name="blur"
min="0"
max="25"
value="10"
data-sizing="px"
/>

<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600" />
</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />

<style>
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}

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

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

/*
misc styles, nothing to do with CSS variables
*/

body {
text-align: center;
background: #193549;
color: white;
font-family: "helvetica neue", sans-serif;
font-weight: 100;
font-size: 50px;
}

.controls {
margin-bottom: 50px;
}

input {
width: 100px;
}
</style>

<script>
const inputs = document.querySelectorAll(".controls input");

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

inputs.forEach(input => input.addEventListener("change", handleUpdate));
inputs.forEach(input =>
input.addEventListener("mousemove", handleUpdate)
);
</script>
</body>
</html>



學習筆記


★ CSS Variable

CSS 變數可以宣告在任何 CSS Selector 的範圍內。

命名方式:開頭 -- ,後面接著英文或數字。例如:--bg-color: red;

  • 在 CSS 使用變數

    使用 var()代表「使用變數」,並且將「宣告名稱」丟進來

    1
    2
    3
    element {
    background-color: var(--bg-color);
    }
  • 在 JS 修改 CSS 變數宣告

    1
    element.style.setProperty("--bg-color", "blue");

★ dataset

在 day01 有提過自定義屬性 data-attribute 的用法,dataset 就是 JS 把所有 data-attribute 的資料取出的方法。也等同於 getAttribute() 方法。

範例:

1
2
3
4
5
6
<div id="student" data-number="1234"></div>

<script>
document.querySelector("#student").dataset.number; // 輸出 1234
document.querySelector("#student").getAttribute("data-number"); // 輸出 1234
</script>

★ documentElement

document.documentElement 回傳文件中的根元素 (root element) ,通常用於取得 html 的 HTMLHtmlElement 物件。

document.querySelector(':root') === document.documentElement

範例:

1
2
3
4
5
6
7
8
9
<p id="demo">顯示文件節點</p>
<button onclick="myFunction()">點我點我</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.innerHTML = document.documentElement;
}
// 輸出 [object HTMLHtmlElement]
</script>

★ setProperty()

setProperty() 可以宣告一個新的 CSS 屬性,或是更改已存在的屬性。

語法:object.setProperty(propertyname, value, priority)

範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
h1{
color: red;
background-color: black;
}
</style>
</head>
<body>
<h1 id="test01">setProperty()方法</h1>

<button onclick="myFunction()">點我</button>

<script>
// 點擊後 color 顏色更換
function myFunction() {
var object01 = document.getElementById('test01').style
var setprop = object01.setProperty("color", "yellow", "important");
}
</script>