JS30紀錄 22-Follow Along Link Highlighter

目標

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

Demo | Github

處理步驟

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

步驟 1.

取得所有超連結

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

步驟 2.

建立 highlight 元素

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

步驟 3.

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

// create function highlight link
function highlightLink() {
}

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

步驟 4.

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

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

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

參考資料

• JavaScript 30 day
• 作者 Github Wes Bos
• Js 30 day 中文指南
• 瓜瓜的 JS 30
• 我的 JS 30 練習Github