开发中经常遇到使用scrollHeight、scrollTop、clientHeight、offsetHeight等的情况，网上有众多关于这些属性的解释，但是并不全面和直观，现在将这些属性结合图例整理如下，方便日后查阅：

DOM元素对象

clientHeight 返回当前元素在页面上的可视高度（包括padding；不包括border、margin、滚动条高度） 单位px
clientWidth 返回当前元素在页面上的可视宽度（包括padding；不包括border、margin、滚动条宽度） 单位px
offsetHeight 返回当前元素在页面上的可视高度（包括padding、border、滚动条高度；不包括margin） 单位px
offsetWidth 返回当前元素在页面上的可视宽度（包括padding、border、滚动条宽度；不包括margin） 单位px
scrollHeight 返回当前整个元素的高度（包括带滚动条的隐蔽的地方） 单位px
scrollWidth 返回当前整个元素的宽度（包括带滚动条的隐蔽的地方） 单位px
scrollTop  clientHeight的顶部到scrollHeight顶部的高度 单位px
scrollLeft  clientWidth左边缘到offsetWidth左边缘的距离 单位px
offsetTop  指当前元素距离上方或上层元素的距离 单位px
offsetLeft  指当前元素距离左边或上层元素左边的距离 单位px

参考资料

http://www.runoob.com/jsref/dom-obj-all.html

https://www.jianshu.com/p/d267456ebc0d

scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解的更多相关文章

  1. 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥

    scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...

  2. Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

    Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...

  3. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  4. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  5. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  6. top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而p ...

  7. 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...

  8. 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

    1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {    ...

  9. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

随机推荐

  1. tornado ThreadPoolExecutor

    import os import sys import time import tornado.httpserver import tornado.ioloop import tornado.opti ...

  2. 操作系统开发之——一个简单的Bootsect

    先吓唬一下读者朋友呵呵,直接发代码:(这是UOS操作系统的Bootsect)(有兴趣的朋友能够增加我们,联系方式在最后) ;------------------------------ ;文件名称:B ...

  3. 微信小程序自定义分享图片

    自定义分享图片 onShareAppMessage: (res) => { if (res.from === 'button') { console.log("来自页面内转发按钮&qu ...

  4. windwos at 以及shutdown使用方法

    at 12:00 shutdown -r如果今天12点没过去,今天12点重启,如果今天12点已经过去,明天12点重启.每天12点重启的命令是at 12:00 /every:Monday,Tuesday ...

  5. 【VBA编程】13.Workbook对象的事件

    Workbook事件用于响应对Workbook对象所进行的操作. [BeforeClose事件] BforeClose事件用于响应窗口关闭的操作 在工程资源器中,双击“ThisWorkbook”对象, ...

  6. 小强升职记（GTD）脑图

  7. Ansible远程执行脚本示例

    首先创建一个shell脚本 cat /tmp/df.sh #!/bin/bash df -h|grep vda|awk '{print $5}' 然后把该脚本分发到各个机器上 ansible comp ...

  8. lsb_release: command not found 解决

    问题:lsb_release 是查看系统版本信息的工具 [root@localhost ~]# lsb_release -a-bash: lsb_release: command not found ...

  9. Mac /Ubuntu/Windows 下安装nodejs

    Mac If you're using the excellent homebrew package manager, you can install node with one command: b ...

  10. 基于委托的C#异步编程的一个小例子 带有回调函数的例子

    我创建的是一个winform测试项目:界面如下: 设置: 下面是代码: using System; using System.Collections.Generic; using System.Com ...