开发中经常遇到使用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. 关于RecyclerView条目复用

    前言 说下前几天遇到的一个小问题,关于RecyclerView条目选中状态的保存.众所周知,RecyclerView被创造出来用于条目的回收利用,但是,当前面回收的条目带有一些特殊的状态(区别于未选中 ...

  2. WebDriver API——第1部分

    The API definitions in this chapter shows the absolute location of classes. However the recommended ...

  3. lodash merge mergeWith使用

    1.作用 递归合并来源对象的自身和继承的可枚举属性到目标对象. 2.示例 <!DOCTYPE html> <html lang="zh"> <head ...

  4. Building Vim from source（转）

    Compiling Vim from source is actually not that difficult. Here's what you should do: First, install ...

  5. 【Python】学习笔记十一：文件I/O

    文件I/O是Python中最重要的技术之一,在Python中对文件进行I/O操作是非常简单的. 1.打开文件 语法: open(name[, mode[, buffering]]) 1.1文件模式 1 ...

  6. JDBC:数据库操作：事务

    事务特征:原子性,一致性,独立性,持久性. 要想操作事务,必须按照以下步骤完成. 1,取消掉自动提交(SET AUTOCOMMIT=0):每次执行数据库更新的时候实际上发出SQL命令之后就已经提交上去 ...

  7. 【OpenGL基础篇】——使用面向对象方法封装OpenGL函数（二）

    今天封装了一个Line类.负责在昨天写的窗体上绘制线条. OpenGL画图是通过给glBegin函数设置參数达成的,绘制线条有三个不同的參数: GL_LINES : 绘制连接两个点的线段(绘制的端点位 ...

  8. （七）Oracle学习笔记—— 游标

    1.游标简介 游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集. 为了处理SQL语句,Oracle将在内存中分配一个区域,这就是 ...

  9. C语言-结构体内存对齐

    C语言结构体对齐也是老生常谈的话题了.基本上是面试题的必考题.内容虽然很基础,但一不小心就会弄错.写出一个struct,然后sizeof,你会不会经常对结果感到奇怪?sizeof的结果往往都比你声明的 ...

  10. PHP使用file_put_contents写入文件的优点

    本篇文章由:http://xinpure.com/advantages-of-php-file-write-put-contents-to-a-file/ 写入方法的比较 先来看看使用 fwrite ...