JavaScript30-Day3-CSS變數使用

Posted on | Edited on | In | Comments: 0

03 - CSS Variables

DEMO
GitHub

筆記

CSS 變數使用練習。

css variable

方便管理及定義一些常用的 style，日後要更動只要改變數得值  就好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    /* 設定 global 的 css variable */
    :root{
        --base-color:#ffc600;
    }
    /* 使用 global css variable */
    .demo{
        color:var(--base-color);
    }

    /* 區域 css variable */
    .main{
        --main-bg-color:#ffb544;
    }
    /* 使用區域 css variable */
    .main{
        background-color:var(--main-bg-color);
    }
</style>

querySelectorAll

取到得值非 array 而是 NodeList，用開發者工具點開來會發現它的 prototype 沒有陣列那麼多可以使用，但是 forEach 仍然存在可以使用。

data attribute

1
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

可以在 html tag 上使用 data- 屬性來儲存一些額外的資訊，範例裡運用此特性儲存對應的 css value 後綴字詞。

使用 element.dataset.sizing 可取得 data- 得值