獲取元素大小、偏移量及滑鼠位置

dreams發表於2022-04-17

最近在開發過程中，發現獲取元素寬度、偏移量的幾個常用屬性總是在不斷的忘記，今天閒暇無事便將這些記錄下來。

以下width與height性質等同。

獲取元素寬度

width clientWidth offsetWidth scrollWidth
組成 content content+padding content+padding+border Content+padding+滾動條寬度
是否只讀 否 是 是 是

width

  • width=content
  • style.width 的返回值自帶單位px；
  • 這個width的具體組成部分是由盒子模型決定的，預設的width即為內容區寬度；
  • 當樣式寫在行內的時候，如 <div id="box" style="width:100px">時，用style.width可以獲取元素的寬度。但是，當樣式寫在樣式表中時，如 ＃box{ width: 100px; }, 而style.width所返回的值為空。

clientWidth

  • clientWidth=content+padding
  • 只讀屬性；
  • 當元素超出父容器時，寬度即為可視區寬度；

offsetWidth

  • offsetWidth=content+padding+border
  • 只讀屬性；
  • 當元素超出父容器時，寬度即為可視區寬度；

scrollWidth

  • scrollWidth=Content+padding+滾動條寬度(scrollLeft)
  • 只讀屬性；
  • 元素的真實寬度，當超出父元素並有滾動條時，scrollWidth=clientWidth+scrollLeft，不包含border；

獲取元素偏移距離

scrollLeft left
描述 滾動條寬度 超出父容器的左側偏移距離
是否只讀 否 否

scrollLeft

  • scrollLeft為超出父容器左側滾動條寬度

left

  • left為超出父容器左側的偏移距距離
  • 只在開啟定位，脫離文件流後有效

獲取滑鼠位置

  • 滑鼠位置屬性全部可寫
clientX offsetX pageX screenX
以瀏覽器視窗左上頂角為原點，定位 x 軸座標 以當前事件的目標物件左上頂角為原點，定位 x 軸座標 以 document 物件（即文件視窗）左上頂角為原點，定位 x 軸座標，因此當頁面有左側滾動條時，pageX=clientX+滾動條寬度 計算機螢幕左上頂角為原點，定位 x 軸座標

位置相關的幾個常見方法

getBoundingClientRect scrollTo scroll scrollby
呼叫方式 dom.getBoundingClientRect() scrollTop(left,top)或scrollTop(optionObj) scroll(left,top)或scroll(optionObj) scrollby(left,top)或scrollby(optionObj)
描述 該方法會返回一個矩形物件，用於獲取元素相對於瀏覽器視口的位置以及自身大小 滾動到文件的特定位置 滾動到文件的特定位置 滾動一段特定距離

getBoundingClientRect

  • 返回值示例
{
    bottom: 615.125
    height: 64
    left: 241.60000610351562
    right: 1521.6000061035156
    top: 551.125
    width: 1280
    x: 241.60000610351562
    y: 551.125
}
  • 與我們平時理解的不同，該物件中的left和right都是相對於瀏覽器左側視口的距離，同理bottom和top是相對於上側的；
  • 當視口存在滾動條併發生滾動時，left、right等屬性值會隨之改變，如果想獲取距離瀏覽器視窗的絕對距離，可以考慮將當前的left加上window.offsetX
  • 通過height和width可以獲取到元素實際大小

相關文章