首先，这些都是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. Tornado 线程池应用

    Tornado是一个异步框架,在异步操作的时候能提升程序的处理性能.但是如果在程序中碰到同步的逻辑,由于GIL的关系,会直接卡死,导致性能急剧下降. 目前对于mongodb以及redis都有比较不错的 ...

  2. Robots协议（摘）

    robots协议 Robots协议(也称为爬虫协议.机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以抓 ...

  3. mqtt使用一

    最近做的一个项目用到了mqtt协议,我需要从第三方订阅主题接受消息,还需要自己搭建,mqtt服务器去发布主题.下面就详细介绍一下环境的搭建和使用. 1.mqtt介绍 MQTT是一个基于客户端-服务器的 ...

  4. 对QP中RTC的理解

    1.概念 RTC(Run To Completion)是运行到完成为止的意思.在状态机中,从源状态到目标状态的转换动作要运行到完成. 从字面上来看,这个过程像是不可中断的,但实际并不是,这个过程可以被 ...

  5. python学习第三天 -----2019年4月23日

    第三周-第03章节-Python3.5-集合及其运算 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 ...

  6. Rsync+inotify实现文件实时同步#附shell脚本

    强烈推荐先仔细看此文 https://segmentfault.com/a/1190000002427568 实验环境 centos 7.3 vm2:192.168.221.128 同步服务器 vm1 ...

  7. flask（列表数据接口设计）

    新闻列表数据只是当前页面的一部分 点击分类时需要去获取当前分类下的新闻数据 并在展示的时候需要更新新闻列表界面,不需要整体页面刷新 所以新闻数据也使用 ajax 的方式去请求后台接口进行获取 接口设计 ...

  8. C#、C++、Java、Python 选择哪个好？

    C#.C++.Java.Python 选择哪个好? 2019年03月06日 16:54:34 编程小火车 阅读数:214   首先排除Python,光动态语言一个理由,就已经万劫不复了.无论有多少所谓 ...

  9. java 获取目标时间到当前时间中间的月份和每月最大时间

    话不多说自己上代码: Date firstDate = DateUtil.formate("2018-01-01", "yyyy-MM-dd"); Date c ...

  10. 【Hutool】Hutool工具类之随机工具——RandomUtil

    commons-lang中对应也有RanddomUtils.RandomStringUtils 直接从类结构开始入手: 基本都是见名知意了,就不一一展开:点开源码可以看到算是比较通俗易懂的对Rando ...