offsetHeight,clientHeight,scrollHeight,offsetY等属性不要在弄混了

110 阅读1分钟

参考引用:www.cnblogs.com/yesyes/p/76…

  • el.offsetHeight = 在clientHeight的基础上加上滚动条的高度,height + padding + border+滚动条

  • el.clientHeight = 可视化看到的高度 height + padding + border el.scrollHeight = 整个元素的高度 ( 包括了clientHeight看不到的那部分,一般就是你css设置的元素高度)

  • el.offsetTop = 子元素的外边框到父元素的内边框的垂直距离 (没边框时自然就是content到content的距离)

  • el.offsetLeft = 子元素的外边框到父元素的内边框的水平距离距离

  • el.scrollTop = 元素被卷去的垂直距离 (就是你看不到的那部分

  • el.scrollLeft = 元素被卷去的水平距离

  • el.clientTop = 就是元素上边框的大小 (不够语义化也不常用) el.clientLeft = 元素左边框的大小

还有几个和mousemove鼠标移动事件相关的属性,也是比较容易混淆的

  • e.offsetY = 鼠标距离该元素上面的距离 (不包括边框,在边框上移动时得到的负值)

  • e.offsetX = 鼠标距离该元素左边的距离

  • e.clientY = 鼠标距离客户端可视区的垂直距离

  • e.clientX = 鼠标距离客户端可视区的水平距离

document.documentElement返回html dom中的root 节点 即<html>,
document.body返回html dom中的body节点 即<body>
    
document.documentElement.clientHeight用来获取页面可视高度更加准确