Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步,無以致千里;不積小流,無以成江海。

0%

JS30紀錄 22-Follow Along Link Highlighter

目標

製作一個凸顯高亮度來跟隨文章中的超連結
target

Demo | Github

處理步驟

此次實作內容也很簡易,建立一個 span 元素,並設定 highlight class ,然後移動這個元素到選取的文字上。

步驟 1.

取得所有超連結

1
2
// 取得所有超連結
const triggers = document.querySelectorAll("a");

步驟 2.

建立 highlight 元素

1
2
3
4
5
6
//建立 highlight 元素
const highlight = document.createElement("span");
// 設定 CSS
highlight.classList.add("highlight");
// 加入到 body
document.body.appendChild(highlight);

步驟 3.

針對所有超連結元素綁定 mouseenter 事件

1
2
3
4
5
6
// create function highlight link
function highlightLink() {
}

// 對所有超連結綁定事件
triggers.forEach(a => a.addEventListener("mouseenter", highlightLink));

步驟 4.

function highlightLink 內容撰寫,主要是設定 highlight 大小與位置,先利用 getBoundingClientRect 取得目前元素大小與位置
getBoundingClientRect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function highlightLink() {
// 取得元素的大小與位置
const domRect = this.getBoundingClientRect();
console.dir(domRect);

// 設定 highlight 寬度等於目前元素寬度
highlight.style.width = `${domRect.width}px`;
// 設定 highlight 高度等於目前元素高度
highlight.style.height = `${domRect.height}px`;
// 移動 highlight 元素到目前元素位置,考量因為有 scroll bar
highlight.style.transform = `translate(${domRect.left +
window.scrollX}px, ${domRect.top + window.scrollY}px)`;
//console.log([window.scrollX,window.scrollY]);
}

筆記與備註事項

JavaScript 部分

getBoundingClientRect()

取得元素的大小與相對位置

mouseenter

當滑鼠移動到元素上時觸發。

參考資料

歡迎關注我的其它發布渠道