HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全詳解
阿新 • • 發佈:2018-12-19
scrollHeight: 獲取物件的滾動高度。
scrollLeft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離
scrollTop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離
scrollWidth:獲取物件的滾動寬度
offsetHeight:獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft:獲取物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop:獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文件的水平座標
event.clientY 相對文件的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文件的水平座標+垂直方向滾動的量
以上主要指IE之中,FireFox差異如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)