JS30 Day 3 - Playing with CSS Variables and JS 学习笔记

今天要利用CSS变数来控制图像的设置

以下为原始档

https://github.com/87JoJo/Playing-with-CSS-Variables-and-JS-

成果如下图

以前我们都是直接在JS控制属性，而这次我们利用资料(归纳在css中)，
也就是在CSS设置变数的方法来改变画面，缺点会比较难找变数名称。

type="range",type="color"

分别为滑动桿，与色彩选取器

<label for="spacing">Spacing:</label><!-- type="range" 滑动桿 --><input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-      sizing="px" /><label for="base">Base Color</label><!-- type="color" 颜色选取器  --><input id="base" type="color" name="base"

而在css部分

:root

为伪类选取器，设置样式为变数，前面需要加上--，我们将变数设置在html里
，然后img及hl在利用var获取其设置好的属性值，当我们:root内的属性值改变
，img及hl的画面也会跟着改变。

/* :root等同于html */:root {  --base: #ffc600;  --spacing: 10px;  --blur: 10px;}img {  /* 读取位于html层设置的变数属性 */  padding: var(--spacing);  background: var(--base);  filter: blur(var(--blur));}.hl {  color: var(--base);}

js部分

先利用querySelectorAll获取所有Input

  // querySelectorAll获取为半残的array(like-array)，有foreach、length、key，但无map  const inputs = document.querySelectorAll('.controls input');  // console.log(inputs); NodeList(3)  

在遍历每个Input做监听事件的处理，利用change事件来做监听，当input有所变动就会触发，但change为修改完，最后才会触发，为了连续触发属性值(10px,11px,12px...)，所以要额外加上mousemove的事件，来做即时的监听。

  // 每次拿一个input，并赋予事件  inputs.forEach(input => {    // 当改变的时候触发changeHandler    // change事件为最后触发    input.addEventListener('change', changeHandler);    //  如果要连续触发须加上mousemove    input.addEventListener('mousemove', changeHandler);  });

再来就处理触发事件后的函数changeHandler，我们所要的是触发事件后，更改对应的样式。

switch写法

这种写法，繁杂麻烦，当要一次改变多个样式，还需再加上一行代码

  function changeHandler() {    console.log(this.name, this.value); 可获取当前改变的样式及值    switch (this.name) {      case 'spacing':        document.querySelector('img').style.padding = this.value + 'px';        break;      case 'blur':        document.querySelector(          'img'        ).style.filter = `blur(${this.value}px)`;        break;      case 'base':        document.querySelector('img').style.background = this.value;        // 改变标题的字母(js)        document.querySelector('.hl').style.color = this.value;        break;    }    

资料放在root，要获取的话，这三种写法都相同
document.querySelector('html')=document.querySelector(':root')=document.documentElement

[]

[属性名称]较传统方法，来设置属性，但由于变数名有--，故无法使用中括号
而后的三目运算符，为如果属性名为base就加上''，如果不为(blur,spacing)就加上px

document.documentElement.style['--' + this.name]= this.value + (this.name === 'base' ? '' : 'px');

setProperty

获取放在html层的资料变数，并利用setProperty修改其属性值

    document.querySelector('html').style.setProperty('--' + this.name,this.value + (this.name === 'base' ? '' : 'px'));    

dataset

<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px" /><input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" /><input id="base" type="color" name="base" value="#ffc600" />

以dataset判断代替三目运算符，dataset指的也就是读取所有你在DOM上data开头的属性，如果有sizing的属性就用它，如果没有就给予空，而在我们的DOM元素，有sizing的只有blur,spacing。

  // 设置一个变数，如果data为sizing的属性就使用他的属性值，否则为空  const unit = this.dataset.sizing || '';  document.querySelector('html').style.setProperty('--' + this.name, this.value + unit);     // document.querySelector('html').style.setProperty('--' + this.name,this.value +         (this.dataset.sizing || ''));    console.log(this.dataset); // DOMStringMap {sizing: "px"}  console.log(this.dataset.sizing); // 当控制spacing,blur出现px而改变颜色会出现undefined```