本篇文章主要紀錄觀看Alex大大直播紀錄後，所做的筆記記錄
demo連結
CSS變數操控（目前使用率低，所以不用深入研究）
- 偽類選取器
:root===html
- 變數選取器寫法介紹與取用
1
2
3
4
5
6
7
8
9
10
11
12/* CSS變數命名前面需要：-- */
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
/* 變數讀取則需要var */
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
} - 補充：寫法介紹參考資料：W3cschool詳細介紹
1
2
3
4
5
6
7
8//自定義名稱 值（三種格式：string、長度、顏色）
var(custom-name, value)
範例：
:root {
--main-color: #ffc600;
--text: attr(class);
--div-size: 100px;
}
JS
下面主要著重使用到的語法：
This取用
提醒：必須清楚知道當下this為何？
設定全域變數
方法一：使用Switch用法撰寫使用JS直接更新畫面
方法二：使用setProperty
加入全域變數前：
記得確認目前變數資料放的位置總結：影片59分開始
心得
1.setProperty取用 w3cschool介紹
2.switch用法複習
3.this取用
4.filter用法練習