D25 - 走！去浏览器吃饼乾 yummy yummy！

前言

今天来学元素的 classList，一口一口吃饼乾 yummy yummy!
Codepen 成品连结

图片来源 PurePNG

classList

DOM 每个节点都有一个 classList 物件，透过这个物件可以动态的在节点的 class 属性上操作，classList 内可以使用的方法包含：

classList.add
classList.remove
classList.contains
classList.toggle
classList.length
classList.item

来试试对一个 p 标签使用不同的 classList

<body>
<p>舌尖上的JS</p>
</body>

<style>
.color {
    color: green;
}
.background {
    background: black;
}
</style>

1. 增加 `classList.add`

使用 classList.add 增加两个 class 到 p 标签上。

document.querySelector('p').classList.add('color, background')

2. 移除 `classList.remove`

使用 classList.remove 移除现有的 class 。

document.querySelector('p').classList.remove('background')

3. 切换 `classList.toggle`

使用 classList.toggle 有两种效果，当元素上没有这个 class 时，会新增 ; 反之已经存在的话则移除。

document.querySelector('p').classList.add('background')
// p 现在有 background，使用 toggle 会移除此属性
document.querySelector('p').classList.toggle('background')

// p 刚刚移除了 background，再使用 toggle 会新增回去
document.querySelector('p').classList.toggle('background')

4. 是否存在 `classList.contains`

classList.contains 用来检查是否存在某 class，回传 boolean 值。

document.querySelector('p').classList.contains('background')  // true

5. 检查 class 数量 `classList.length`

classList.length 检查标签上的 class 数量。

// 若 p 标签现在有两个 class： color、background
document.querySelector('p').classList.length // 2

6. 回传对应的 class 名称 `classList.item(index)`

依照输入在 item(index) 的 index 值回传对应的 class 名称。

// 若 p 标签现在有两个 class
// [0]: color , [1]: background
document.querySelector('p').classList.item(0) // 回传 color

实作：一口一口吃饼乾

设计想法是：每点击页面一次，饼乾吃掉一口
实作：将每一口饼乾的 css 先写好，利用 clip-path 制造出不同的饼乾面积，再透过 classList 的 classList.add 加上每一口的 class，最後用 classList.remove 将所有 class 拔掉回复原状！

饼乾的 CSS clip-path 设定推荐一个好用的自动生成网站 CSS clip-path maker

<!--  html结构 -->
<body>
    <img id="cookie" src" 饼乾图片 url" />
</body>

<style>
.bite-1 {
    clip-path: polygon()
}
.bite-2{...}
.bite-3{...}
.bite-4{...}
.bite-5{...}
.bite-6{...}
.bite-7{clip-path: polygon(0% 0%)}  //最後一口
</style>

JavaScript 程序码如下：

// 选到 cookie 标签
let cookie = document.querySelector('#cookie');
// 用来计算吃几口
let count = 0;

// 绑定点击 body 吃饼乾
body.addEventListener('click', function () {
    count++; // 每点击 count +1
    cookie.classList.add(`bite-${count}`); // 每次点击加上对应的 bite class
    
    // 当吃到第 8 口没饼乾的时候，移除掉所有 class 回复完整饼乾   
    if (count === 8) {
        for (let i = 0; i <= 7; i++) {
        cookie.classList.remove(`bite-${i}`);
        }
        count = 0; // 记得将计数归零哦！
    }
});

简单的一口一口吃饼乾效果就完成啦~~~ Codepen 成品连结