天天看點

offsetHeight,clientHeight,scrollHeight,offsetY等屬性的了解

el.offsetHeight = height + padding + border(滾動條是在邊框内的,自然也包括在内)

el.clientHeight = 可視化看到的高度 (就是content的高度)

el.scrollHeight = 整個元素的高度 ( 包括了clientHeight看不到的那部分,一般就是你css設定的元素高度)

el.offsetTop = 子元素的外邊框到父元素的内邊框的垂直距離 (沒邊框時自然就是content到content的距離)

el.offsetLeft = 子元素的外邊框到父元素的内邊框的水準距離距離

el.scrollTop = 元素被卷去的垂直距離 (就是你看不到的那部分,包括邊框遮住的部分,因為遮住的部分你也看不到。結果有小數位)

在chrome下測試,當我們滑動到底部時,el.scrollHeight === el.clientHeight + Math.ceil(el.scrollTop)

el.scrollLeft = 元素被卷去的水準距離

el.clientTop = 就是元素上邊框的大小 (不夠語義化也不常用)

el.clientLeft = 元素左邊框的大小

還有幾個和mousemove滑鼠移動事件相關的屬性,也是比較容易混淆的

e.offsetY = 滑鼠距離該元素上面的距離 (不包括邊框,在邊框上移動時得到的負值)

e.offsetX = 滑鼠距離該元素左邊的距離

e.clientY = 滑鼠距離用戶端可視區的垂直距離

e.clientX = 滑鼠距離用戶端可視區的水準距離

每次用都記不住,導緻我都要google一下,确實容易混淆