iT邦幫忙

2021 iThome 鐵人賽

DAY 25
1
Modern Web

舌尖上的JS系列 第 25

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

前言

今天來學元素的 classList,一口一口吃餅乾 yummy yummy!
Codepen 成品連結


圖片來源 PurePNG

classList

DOM 每個節點都有一個 classList 物件,透過這個物件可以動態的在節點的 class 屬性上操作,classList 內可以使用的方法包含:

  1. classList.add
  2. classList.remove
  3. classList.contains
  4. classList.toggle
  5. classList.length
  6. 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 成品連結

Reference

2018.05.27前端開發classlist, DOM, html
MDN - classList

結語

做完作品突然好想吃上面有巧克力豆的那種軟餅乾 (´﹃`)


上一篇
D24 - 走!去瀏覽器偷聽 Capturing & Bubbling
下一篇
D26 - 走!去瀏覽器重現奧運決勝點 in
系列文
舌尖上的JS30

1 則留言

0
Chiahsuan
iT邦新手 4 級 ‧ 2021-10-10 20:10:35

明天帶餅乾給妳吃~~~
一直點擊超療癒的,而且好有創意喔!!!超級棒~~~/images/emoticon/emoticon24.gif

我要留言

立即登入留言