JavaScript中的 offset, client,scroll

在js 中咱們要用到的 offset, client, scroll 在這我把本身理解的給你們分享一下。

offset

div.offsetTop 指div距離上方或上層控件的距離，單位像素

div.offsetLeft 指div距離左側或上層控件的距離，單位像素

div.offsetWidth 指div 控件自己的寬度，單位像素

div.offsetHeight 指div 控件自己的高度，單位像素

混淆點

clientWidth 指對象看到的寬度，不包含border

scrollWidth 是對象實際的寬度，若是有padding 則就是左 padding和右padding之間的距離，若是沒有padding，則就是邊框之間的距離。

offsetWidth 是指對象的寬度，（包含border，滾動條佔的寬度，值會隨着內容的輸入而改變）。

scrollHeight 是指獲取對象的滾動高度。

scrollLeft 是指獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離。

scrollTop 是指獲取位於對象最頂端和窗口中目前可見內容的最頂端之間的距離。

scrollWidth 獲取對象的滾動寬度。

clientX 是指設置或獲取鼠標指針位置相對於當前窗口的x座標，不包括窗口自身的控件和滾動條。

clientY 是指設置或獲取鼠標指針位置相對於當前窗口的Y座標，不包括窗口自身的控件和滾動條。

offsetX 是指設置或獲取鼠標指針位置相對於觸發事件的對象的x座標。

offsetY 是指設置或獲取鼠標指針位置相對於觸發事件的對象的Y座標。