首先，这些都是dom节点的属性。

高宽属性：
clientHeight：html元素不含border的高度。
　　对于box-sizing不同的情况，有些地方需要注意一下。
当box-sizing为content-box的时候，clientHeight实际上相当于height+padding。当box-sizing 为border-box的时候，clientHeight实际上为height-border

offsetHeight：html元素里包含border的高度。

scrollHeight：内元素的margin+border+padding+内容。

定位属性：
clientTop：border的宽度。

scrollTop：滚动了的高度。如下图（外元素上下滚动）

offsetTop：到上一个有定位的元素的距离。上一个是指上层节点，有定位指的是有position属性.

clientHeight、offsetHeight、scrollHeight、clientTop、scrollTop、offsetTop的对比的更多相关文章

  1. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

  2. clientTop scrollTop offsetTop

    关于top.clientTop.scrollTop.offsetTop的用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.cli ...

  3. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  4. offsetheight 和clientheight、scrollheight、scrollTop区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

  5. 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight

    http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...

  6. clientHeight,offsetHeight,scrollHeight迷一样的三个值

    https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571  推荐 o ...

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

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

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

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

  9. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

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

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

随机推荐

  1. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  2. 修改本机默认的jdk版本

    因为开发需要使用多个jdk,在修改jdk版本时遇到了一些问题 在系统变量的%JAVA_HOME%中修改了jdk的路径,但是重启后java -version版本并没有改变. 在网上找到一篇文章,修改了注 ...

  3. 插入排序_c++

    插入排序_c++ GitHub 文解 插入排序的核心思想是针对于 N 个元素进行排序时,共进行 K = (N-1) 次排序,第 M 次排序时将第 M + 1 个元素插入前 M 个元素中进行排序. 图解 ...

  4. iOS获取通讯录所有联系人信息

    以下是2种方式: 第一种方法: GetAddressBook.h #import <Foundation/Foundation.h> @interface GetAddressBook : ...

  5. WebGL学习笔记（1）

    基本的WebGL图形操作(详细参考教程:https://www.yiibai.com/webgl,需要1周左右熟悉webgl的对象方法以及着色器代码):绘制三角形 drawElements gl.TR ...

  6. Jquery拼图

    Jquery代码 <script> $(function () { $("td").click(function () { var img = $(this).prop ...

  7. Oracle之多表查询

    -多表查询 1.交叉连接 select * from t_class for update; select * from t_student for update; select for update ...

  8. Python3练习：对员工信息文件，实现增删改查操作

    1.练习要求: 2.数据文件(data_staff.txt) 1,Alex Li,22,13651054684,运维,2013-02-04 2,Jack Wang,20,13312331232,HR, ...

  9. 树莓派驱动DHT22

    树莓派-DHT22测量湿度 一般的温湿度传感器有dht11和dht22,dht11比较便宜,dht22比dht11贵好几倍,自然测量的准确度肯定是dht22高一些.追求更高精准度的可以使用SHT1x. ...

  10. 第6天 Java基础语法

    第6天 Java基础语法 今日内容介绍 自定义类 ArrayList集合 引用数据类型(类) 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类 ...