Day22-課題內容

在今天的課題當中，我們要透過滑鼠事件屬性以及 CSS 屬性，在頁面上做出聚光燈。[1]
實作連結

Element.getBoundingClientRect()

在前面的章節中，我們學過幾個跟滑鼠位置以及 DOM 上元素位置的屬性，而今天我們要利用新的方法 Element.getBoundingClientRect()。[2]
Element.getBoundingClientRect() 方法，會回傳一 DOMRect 物件，該物件中包含將該元素的大小，以及目前在可視區域中的位置的資料：

1. DOMRect.top：元素於目前可視範圍中，距離上方邊界的距離。
2. DOMRect.bottom：元素於目前可視範圍中，距離下方邊界的距離。
3. DOMRect.left：元素於目前可視範圍中，距離左邊邊界的距離。
4. DOMRect.right：元素於目前可視範圍中，距離右邊邊界的距離。
5. DOMRect.x：元素於目前可視範圍中，水平方向的座標。
6. DOMRect.y：元素於目前可視範圍中，垂直方向的座標。
7. DOMRect.width：元素的寬。
8. DOMRect.height：元素的高。

在之前的章節中，我們有使用過元素的 offsetLeft 以及 offsetTop 屬性，但這兩個屬性所得到的值，為子元素在父元素中的位置，如果遇到包了許多層父元素的話，就會變得難以計算。
而透過 DOMRect 物件，我們可以直接利用其中的屬性，結合前面學的 scrollX 以及 scrollY 取得捲動量多寡，就可以簡單計算出我們需要的位置資訊。

進入課題

在今天的課題當中，我們的目的是將所有的 <a> 元素加上聚光燈的效果，因此我們需要先加上監聽事件 mouseover，此事件會在滑鼠移入該元素的時候觸發：

document.querySelectorAll('a').forEach(function(item) {
    item.addEventListener('mouseover', move);
});

要做出聚光燈移動的效果，我們就要在 DOM 中新增出一個元素，並讓他在 mouseover 事件發生時，能移動到我們觸發事件元素的位置，因此我們先建好一個 .highlight 元素，並設定此元素寬跟高都為0，並在觸發的函式中，並透過DOMRect 物件，將指定元素的寬與高指派給 .highlight 元素，而位置的計算可能遇到頁面的捲動而產生誤差，因此要再加上捲動值：

const highLight = document.querySelector('.highLight');

function move (event) {
    let positionData = event.target.getBoundingClientRect();
    let xPosition = positionData.left + window.scrollX;
    let yPosition = positionData.top + window.scrollY;
    let elementWidth = positionData.width;
    let elementHeight = positionData.height;
    highLight.style.left = `${xPosition}px`;
    highLight.style.top = `${yPosition}px`;
    highLight.style.width = `${elementWidth}px`;
    highLight.style.height = `${elementHeight}px`;
};

完成以上的設定之後，再透過 CSS屬性的設定，就能做出聚光燈移動的效果！

.highLight {
  width: 0;
  height: 0;
  transition: all 0.2s;
  border-bottom:2px solid white;
  position: absolute;
  top:100px;
  background:white;
  left:100px;
  z-index: -1;
  border-radius:20px;
  display: block;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

總結

今天我們學到 Element.getBoundingClientRect() 方法以及 DOMRect 物件，透過這個物件，我們能更快取得元素目前於頁面上的位置，並透過結合 CSS 屬性，我們成功在頁面上做出了聚光燈的效果！

參考資料

1. javascript30
2. MDN-Element.getBoundingClientRect()