Day03 - CSS 变量

时间 2021-02-14

标签 javascript css html java git github 数组微信框架函数栏目 CSS 繁體版

原文原文链接

Day03 - CSS 变量

做者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。如今你看到的是这系列指南的第 3 篇。完整指南在从零到壹全栈部落。javascript

实现效果

用 JavaScript 和 CSS3 实现拖动滑块时，实时调整图片的内边距、模糊度、背景颜色，同时标题中 JS 两字的颜色也随图片背景颜色而变化。css

涉及特性

:roothtml
var(--xxx)：CSS 变量（CSS Variables）java
filter: blur()git
事件 change、mousemovegithub

HTML源码

<h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>


  <div class="result">
    <div class="showText">{spacing:<label id="label_spacing">#ffc600</label>}</div>
    <div class="showText">{blur:<label id="label_blur">10px</label>}</div>
    <div class="showText">{base:<label id="label_base">10px</label>}</div>
  </div>


  <img src="http://f.hiphotos.baidu.com/lvpics/h=800/sign=b346032cbe389b5027ffed52b534e5f1/960a304e251f95ca545f8b84ce177f3e6709525d.jpg">

CSS源码

<style>
     :root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

    img {

      width: 600px;
      height: 400px;
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
    }
    /*
      misc styles, nothing to do with CSS variables
    */

    body {
      text-align: center;
      background: #193549;
      color: white;
      font-family: 'helvetica neue', sans-serif;
      font-weight: 100;
      font-size: 30px;
    }

    .controls {
      margin-bottom: 50px;
    }

    input {
      width: 100px;
    }

    .result {
      display: flex;
      flex-direction: row;
      justify-content: center;
      color: var(--base);
    }

    .showText {
      margin: 0px 25px 50px 25px;
    }
  </style>

JS源码

<script>
    const inputs = document.querySelectorAll('.controls input');

    function handleUpdate() {
      const suffix = this.dataset.sizing || '';
      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
      document.getElementById(`label_${this.name}`).innerText = this.value + suffix;
    }

    inputs.forEach(input => input.addEventListener('change', handleUpdate));
    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
  </script>

过程指南

CSS 部分准备

声明全局（:root）的 CSS 变量数组
将变量应用到页面中对应元素 <img>微信
处理标题的 CSS 值框架

JS 实时更新 CSS 值

获取页面中 input 元素函数
给每一个 input 添加监听事件，使其在值变更，触发更新操做
同 2 ，添加鼠标滑过期的事件监听
编写处理更新操做的方法
1. 获取参数值后缀
- 获取参数名（blur、spacing、color）
- 获取参数值（12px、#efefef）
- 赋值给对应的 CSS 变量

基础知识

NodeList 和 Array 的区别

能够打开 proto 查看它的方法，其中有 forEach()、item()、keys() 等。而 Array 的 prototype 中有 map()、pop() 等数组才有的方法。
HTML5 中的自定义数据属性 dataset

HTML5 中能够为元素添加非标准的自定义属性，只须要加上 data- 前缀，能够随便添加和命名。添加以后，能够经过元素的 dataset 属性来访问这些值，dataset 的值是 DOMStringMap 的一个实例化对象，其中包含以前所设定的自定义属性的“名-值”对。
CSS variable

这是一个 CSS3 的新特性，IE 和 Edge 目前都还不支持。命名写法是 --变量名，在引用这个变量时写法是 var(--变量名)。具体实例见下一条代码。
:root 伪类

这个伪元素匹配的是文档的根元素，也就是 <html> 标签。

因此经常使用于声明全局的 CSS 变量：
```
:root {
  --color: #fff;
}
```
在使用时：
```
img {
  background: var(--base);
}
```
CSS 滤镜 filter

CSS 的滤镜提供了一些图形特效，好比高斯模糊、锐化、变色等。它带有一些预设的函数，在使用时加上参数调用这些函数便可。在 Chrome、Firefox 中都支持。

解决难点

如何处理参数值（一个有 px 、另外一个没有）

运用 dataset 储存后缀，有 px 后缀的标签中设置 <input data-sizing: px>：
```
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input type="color" name="base" value="#8aa8af">
```
JS 中经过 dataset.sizing 来获取后缀值：
```
const suffix = this.dataset.sizing || '';
```
此时 suffix 获取到的值，针对颜色为空，而针对长度类的则为 'px'。
如何用 JavaScript 改变 CSS 属性值？

在 JavaScript 中 document.documentElement 即表明文档根元素。因此要改变全局的 CSS 变量，能够这样写：
```
document.documentElement.style.setProperty('--base', '#fff');
```

源码下载

Github Source Code

社群品牌：从零到壹全栈部落
定位：寻找共好，共同窗习，持续输出全栈技术社群
业界荣誉：IT界的逻辑思惟
文化：输出是最好的学习方式
官方公众号：全栈部落
社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)
技术交流社区：全栈部落BBS
全栈部落完整系列教程：全栈部落完整电子书学习笔记

关注全栈部落官方公众号，每晚十点接收系列原创技术推送