Day 3 - Playing with CSS

前言

JS 30 是由加拿大的全端工程师 Wes Bos 免费提供的 JavaScript 简单应用课程，课程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教学影片里，建立30个JavaScript的有趣小东西。

另外，Wes Bos 也很无私地在 Github 上公开了所有 JS 30 课程的程序码，有兴趣的话可以去 fork 或下载。

本日目标

学习建立 CSS 变数并透过 JavaScript 监听 mousemove、change 事件，接着主动去更新变数的值，让使用者得以调整图片框的大小和背景色、图片的模糊程度等等...。

解析程序码

HTML 部分

由最外层的代表控制列(.controls)的div元素包覆住内部用来调整图片的三个 input 元素(#spacing、#blur、#base)。其中两个 input 元素上有设定 data- 属性，标明使用的单位。

<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>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

CSS 部分

用--变数名称的方式，宣告三个 CSS 的全域变数，并且是在根元素之下。

:root{ /*CSS 全域变数*/
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
}

要使用 CSS 变数，我们可以利用var()并在里面放入要使用的变数名称。

img{
    padding: var(--spacing); /*使用关键字 var( )并在括号内填入想套用的变数名称*/
    background: var(--base);
    filter: blur(var(--blur)); /*套上带有模糊效果的滤镜*/
}

.hl{
    color: var(--base);
}

补充说明1:

CSS 变数的补充资料 >>> :root 根目录选取器 - 叫你阿爸出来讲

补充说明2:

使用 CSS 的 filter 属性，主要目的是套一层滤镜到图片上，常见的值除了有 blur 以外，还有 contrast、grayscale 等等...。 详细见此

JS部分

取得所有的 input 标签，要注意的是这里的资料型态是 NodeList 而不是 Array。

相较 Array 而言，NodeList 能用的方法少很多。

/*JS*/
const inputs = document.querySelectorAll('.controls input'); /*取得所有的 input 元素，资料型态是 NodeList 不是 Array*/

将每个取得的 input 标签都分别注册两个事件监听器，当 input 标签的 value 属性有变动(change)或是滑鼠有在 input 标签的杆上移动时，就透过 handleUpdate() 方法进行事件处理。

function handleUpdate(){
   
}

inputs.forEach(input => input.addEventListener('change',handleUpdate)); /*当数值改变*/
inputs.forEach(input => input.addEventListener('mousemove',handleUpdate)); /*当滑鼠移动*/

在 handleUpdate() 方法内宣告 suffix 变数，透过 dataset.sizing 取得对应属性的单位。当属性没有单位时，指定 suffix 为空字串，避免因为是 undefined 出现错误。

最後，藉着 document.documentElement.style 取得文件上"根元素"的 CSS 属性，进一步使用 setProperty() 调整 CSS 属性值(注意，有些属性必须要加上单位)。

function handleUpdate(){
    const suffix = this.dataset.sizing || ''; /*取得单位，当单位不存在时就指定为空字串*/
    document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix); /*Template literals*/
}

补充说明1:

NodeList 的补充资料 -- JavaScript HTML DOM Node Lists

补充说明2:

透过 dataset 实际取得的 data-自订名称 属性内容如下:

我们可以进一步使用 dataset.自订名称，取得里面代表单位的"px"。
(图片中的 sizing 等同於标签上的 data-sizing)

范例网页请按此