DOM 一些邊緣但蠻好用的 API

1月 24 2022 JavaScript

懶人包。

element.getBoundingClientRect()

取得元素的寬高與位置資訊

<style>
  div {
    width: 400px;
    padding: 10px;
    border: 10px;
  }
</style>
<div>yoyoyo</div>

1	console.log(document.querySelector('div').getBoundingClientRect())

Output：

{
  x: 8
  y: 8
  top: 8
  left: 8
  right: 448
  bottom: 66.4000015258789
  width: 440
  height: 58.400001525878906
}

此方法回傳的寬高是採用 border-box 的計算方式，意思就是算到 boder 為止。

而座標部分是相對於 viewport

x / left 元素的左上角與 viewport 的水平距離
y / top 元素的左上角與 viewport 的垂直距離
right / bottom 元素的右下角距離 viewport 的水平垂直距離

window.scrollTo()

設定滾軸要滾到哪裡

/* 閉包，把變數 index 藏起來 */
function scrollDown() {
  let index = 1
  return function callback() {
    window.scrollTo({
      top: index * 4000
    })
    index++
  }
}
/* 每點一下按鈕就往下滾 4000px */
document.querySelector('button').onclick = scrollDown()

scrollTo-01

也可以設成這樣，就會有 smooth 的效果：

function scrollDown() {
  let index = 1
  return function callback() {
    /*
      top: y 軸
      left: x 軸
      behavior:  smooth, instant, auto
    */
    window.scrollTo({
      top: 4000 * index,
      behavior: 'smooth'
    })
    index++
  }
}
document.querySelector('button').onclick = scrollDown()

scrollTo-02

offsetTop / offsetLeft

附註：如果不知道實際 parent 是誰？可以用 offsetParent 來查詢。

找到第一個 position 非 static 的 parent 並計算距離
parent 的 padding 會計算進去

offset

原始碼可以到 Codepen 上參考

clientWidth / clientHeight

根據該元素的實際大小來計算寬與高，會包含 padding，但不包含 border 和 scrollbar。

client