JavaScript 03 — CSS Variables

实现效果

利用JavaScript及CSS3来改变CSS的值，使得拖动滑块及选中颜色时，可以实时调整图片的内边距（padding）、模糊度（blur）及背景颜色（background）。

<script>
// 1、监听input控件，当有change事件或mousemove事件发生的时候(这时候就需要遍历每个input)，就调用函数
// change 当值发生变化的时候就触发，input事件必然伴随change事件
// 当鼠标在指定的元素上移动时，就会发生 mousemove 事件，这个事件监听能提高input控件的流畅性
// 2、用js改变css属性
// 如果属性很多，控件很多，就要做很多种判断，这样会造成代码冗余，可以用CSS变量来控制

const inputs = document.querySelectorAll('.controls input')
// const img = document.querySelector('img')

function handleUpdate() {
  // console.log(this);  //this代表当前控件
  const suffix = this.dataset.sizing || ''
  // 针对前两个参数值的单位为'px'，针对颜色为空，以防报错。
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
}

inputs.forEach(input =>
  input.addEventListener('change', handleUpdate)
)
inputs.forEach(input =>
  input.addEventListener('mousemove', handleUpdate)
)

</script>
/*
本质是用js改变css变量
DOMStringMap 在使用dataset属性中被用到，用于容纳和展示元素的自定义属性

data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

document.documentElement
返回DOM中的root节点
*/