首先，这些都是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. Unity 游戏框架搭建 (十七) 静态扩展GameObject实现链式编程

    本篇本来是作为原来 优雅的QChain的第一篇的内容,但是QChain流产了,所以收录到了游戏框架搭建系列.本篇介绍如何实现GameObject的链式编程. 链式编程的实现技术之一是C#的静态扩展.静 ...

  2. word 或者 WPS 使用两个目录的时候去掉中间的空格间隙

    在生成图表目录时,发现Office word图表目录中多个标题之间的空行无法删除,我是自己建的标签,比如“图1-”.“图2-”…….“表1-”.“表2-”…… 发现“图1-”.“图2-”…….“表1- ...

  3. Docker 相关命令汇总

    操作容器的命令 镜像中的容器启动之后可以在 docker 中操作和查看容器的信息 l   docker ps 查看运行的容器,如果想查看全部加上参数-a 即可 l   docker create 完整 ...

  4. 集合之TreeMap

    TreeMap 底层数据结构是二叉树 如何保证键的唯一: 利用存的特点 如何保证键的可排序: 利用取的特点 左跟右 在map中数据结构只对键有效TreeMap 有Map的键值对的特性:还可以进行排序, ...

  5. Flume：source和sink

    Flume – 初识flume.source和sink 目录基本概念常用源 Source常用sink 基本概念  什么叫flume? 分布式,可靠的大量日志收集.聚合和移动工具.  events ...

  6. python教程（二）·条件语句

    条件语句一般用来判断给定的条件是否成立,根据结果来执行不同的代码,也就是说,有了条件语句,才可以根据不同的情况做不同的事,从而控制程序的流程. 布尔类型 前面说到数据类型的时候,其中有一种叫 &quo ...

  7. 一起来写段JS drag代码

    http://www.cnblogs.com/275095923/archive/2010/12/09/1901352.html

  8. 网络相关知识点:nginx相关概念

    今天我们来介绍一下反向代理以及负载均衡相关内容: 反向代理: 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求, 然后将请求转发给内部网络上的服务器,并将从 ...

  9. BZOJ4300_绝世好题_KEY

    题目传送门 刚开始是看到这道题目还以为是序列连续的. 当然了,序列可以不连续. 设f[i]表示到第i位时的序列的最长长度. 取cnt=Max f[j]+1,然后转移回去使f[j]=cnt. 这是为了让 ...

  10. GDAL2.1.1库在Ubuntu14.04下编译时遇到的问题处理方法

    不用作任何调整,直接在Linux下编译GDAL2.1.1源码的步骤是: $ ./configure $ make $ make install 非常简单,这样也能正常生成gdal动态库.静态库,如果想 ...