D25 - 走！去瀏覽器吃餅乾 yummy yummy！ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 25

Modern Web

舌尖上的JS系列第 25 篇

D25 - 走！去瀏覽器吃餅乾 yummy yummy！

13th鐵人賽 javascript

Hooo

團隊好想工作室V5.0

2021-10-10 20:00:48

6118 瀏覽

分享至

前言

今天來學元素的 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 成品連結