「JavaScript 30」學習筆記（廿二）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

當滑鼠移動到超連結時，改變行內元素的樣式（位置）。

筆記

選取所有超連結。

1
const triggers = document.querySelectorAll('a');

建立一個行內元素。

1
const highlight = document.createElement('span');

更改行內元素為 highlight 樣式。

1
highlight.classList.add('highlight');

把一個行內元素放進 body 裡。

1
document.body.append(highlight);

建立一個 highlightLink() 方法，以改變行內元素的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function highlightLink() {
    // 取得當前元素的位置資料
    const linkCoords = this.getBoundingClientRect();
    const coords = {
        // 行內元素的寬度
        width: linkCoords.width,
        // 行內元素的高度
        height: linkCoords.height,
        // 行內元素離螢幕頂端的距離加上滾動過的上緣距離
        top: linkCoords.top + window.scrollY,
        // 行內元素離螢幕左端的距離加上滾動過的左緣距離
        left: linkCoords.left + window.scrollX
    };
    // 設置行內元素的寬度
    highlight.style.width = `${coords.width}px`;
    // 設置行內元素的高度
    highlight.style.height = `${coords.height}px`;
    // 設置行內元素的位置
    highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}

綁定每一個超連結，當發生 mouseenter 事件時，觸發 highlightLink() 方法。

1
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));