蒙了嗎?offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX

toymm發表於2018-04-01

1、offsetHeight || offsetWidth = boder + padding + content

兩者都是隻讀屬性,如果想

蒙了嗎?offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX

offsetLeft   offsetTop 一般是相對於offsetParent計算的,也就是第一個定位的父級

兩者都是隻讀屬性

蒙了嗎?offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX

offsetTop 與 style.top 的差別

我們知道 offsetTop 可以獲得 HTML 元素間隔上方或外層元素的地位,style.top 也是可以的,二者的差別是:

  1. offsetTop 返回的是數字,而 style.top 返回的是字串,除了數字外還帶有單位:px。
  2. offsetTop 只讀,而 style.top 可讀寫。
  3. 若是沒有給 HTML 元素指定過 top 樣式,則 style.top 返回的是空字串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣事理。

2、scrollTop、scrollLeft、scrollWidth、scrollHeight

圖上標示了scrollTop && scrollHeight

同理scrollWidth和scrollLeft也是一樣的

蒙了嗎?offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX

3、event.clientX、event.clientY、event.pageX、event.pageY

event.clientX 是目標點距離瀏覽器可視範圍的X軸座標

event.clientY 是目標點距離瀏覽器可視範圍的Y軸座標

event.pageX 是目標點距離document最左上角的X軸座標

event.pageY 是目標點距離document最左上角的Y軸座標

蒙了嗎?offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX


相關文章