开发中经常遇到使用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. vue - .gitignore

    描述:npm官方屏蔽上传文件编写文件. 举例(屏蔽的文件/文件夹记得分行) 屏蔽文件:yarn.txt 屏蔽文件夹:/dist/

  2. 算法笔记_084:蓝桥杯练习 11-1实现strcmp函数(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 自己实现一个比较字符串大小的函数,也即实现strcmp函数.函数:int myStrcmp(char *s1,char *s2) 按照AS ...

  3. Vim快捷键整理

    Vim主要分为两种模式一种是Insert模式,该模式下可以像其它文本编辑器一样正常输入字符:另一种是Normal模式,该模式下Vim监听用户的按键可以对文本进行快速修改. 想要从Insert模式切换到 ...

  4. 最长公共子序列(LCS)问题 Longest Common Subsequence 与最长公告字串 longest common substr

    问题描述:字符序列的子序列是指从给定字符序列中随意地(不一定连续)去掉若干个字符(可能一个也不去掉)后所形成的字符序列.令给定的字符序列X=“x0,x1,…,xm-1”,序列Y=“y0,y1,…,yk ...

  5. struts xml中的result的类型、全局结果集、异常mapping、继承

    例子: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     ...

  6. Drupal的system_list()函数解析

    system_list()函数的目的是根据传入的资源类型,返回一个数组列表: function system_list($type) { ... ... } 参数$type支持下面三种类型: boot ...

  7. 【微信小程序】loading标签使用,可自定义时长

    前言:loading和wx.showToast的区别: wx.showToast加载的时间长度是需要手动设置的,默认1500ms,而loading标签则可以配合数据加载进行隐藏. 核心就是在数据量较大 ...

  8. oracle事务块示例

    begin Insert into T_SYS_PAGEOPER (FOPERID,FPAGEID) values (152,22); Insert into T_SYS_PAGEOPER (FOPE ...

  9. app产品设计碉堡了

    这个项目碉堡了 http://blog.csdn.net/googdev/article/details/54849715 2017-02-03 22:15 3898人阅读 评论(12) 收藏 举报 ...

  10. 基于AXI VDMA的图像采集系统

    基于AXI VDMA的图像采集系统 转载 2017年04月18日 17:26:43 标签: framebuffer / AXIS / AXI VDMA 2494 本课程将对Xilinx提供的一款IP核 ...