JS30 笔记 Day03 CSS Variables

以下为自我纪录的笔记，只记录自己比较不熟的观念。

思路:
设定全域CSS变数 > 取得input元素 > 添加事件 > 使用JS变更CSS全域变数

CSS原生变数(CSS Variables)
css :root === html

:root {     --spacing: 10px;     --blur: 10px;     --base: #ffc600;   } /* html{     --spacing: 10px;     --blur: 10px;     --base: #ffc600; } */

变数用法

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

Js取得CSS原生变数
Js 取得 :root === Js取得html
document.documentElement

使用Js变更CSS原生变数

style.setProperty(propertyName, value, priority);