前言
在写 JS30-03 - CSS Variables(github.com/wesbos/Java…) 时，给好了页面结构，需要补充 css 和 js 完成效果，记录一下别人优雅的代码以及 css 全局变量
初始
成品
思路
正常肯定初始好照片的 padding ,调整背景颜色以及文字颜色与 Base Color 一样，然后 JS 获取三个输入框、图片以及文字，再使用 setProperty 进行 css 修改，给三个输入框绑定 change 以及 mousemove 事件以及对应的处理函数， like this
什么? 你不知道setProperty? 紧急插播一条广告(bushi)
回到练习
鄙人觉得上面那段 JS 除了提两个公共函数无法再优化，，但这些重复操作又感觉像一坨坨💩💩，于是看看大佬的答案(示例正解)
OMG，猜猜别人怎么做😮😮😮😮
示例答案
哈哈，原来我自己才是坨狗💩啊
答案钻研
- :root 定义根元素进行初始化，其余通过 var(name) 来使用
- handleUpdate 函数中通过 this.dataset 拿到 html 结构中所有自定义属性 data-* 的值(仅有的 data-sizing 恰是像素单位，只能说出题人煞费苦心), 再通过document.documentElement.style.setProperty 更改全局的 css 变量即可
🤡🤡🤡🤡🤡
优雅，太优雅了，我还想着这么又臭又长的 JS 操作怎么也能用来练习，🤡竟是我自己
