首先，这些都是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. Oracle的分析函数

    Oracle的分析函数row_number(),rank(),dense_rank()的用法与区别 比如查询工资排名第7的员工信息,可以用分析函数来做. --查询工资排名第7的员工信息select * ...

  2. mysql中对于时间的处理，时间的滚动，求时间间隔，切换时区等等

    mysql中对于时间的处理,时间的滚动,求时间间隔,切换时区等等 在mysql的使用过程中,有时候会出现对时间进行的操作,比如时间向前向后滚动,求2个时间的间隔,或者切换时区的操作 1,时间向前滚动( ...

  3. 新人成长之入门Vue.js弹窗Dialog介绍（二）

    前言 在上一篇博文中介绍了Vue.js的常用指令,今天总结归纳一下弹窗Dialog的使用,弹窗经常被使用在一些表单的增删改查啊,或者弹出一些提示信息等等,在保留当前页面状态的情况下,告知用户并承载相关 ...

  4. 一、PHP基础-安装PHP集成环境

    目录 PHP运行集成环境下载 phpStudy集成环境安装 XAMPP集成环境安装 WampServer环境安装 作者:吴耀田  个人博客:http://www.cnblogs.com/isaacwy ...

  5. Manjaro Linux KDE个人的一些安装配置

    安装manjaro kde linux的个人步骤 1 换源 1.1 自动寻找最快的源 sudo pacman-mirrors -i -c China -m rank 1.2 修改源文件 sudo ge ...

  6. go字符串操作

    在Go语言标准库中的strings和strconv两个包可以对字符串做快速处理 string包 func Contains(s, substr string) bool 字符串s中是否包含substr ...

  7. java instanceof 的理解

    简单来说,java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. 用法 ...

  8. 20145234黄斐《Java程序设计》第十周学习总结

    教材学习内容总结 网络概述 概述 网络编程技术是当前一种主流的编程技术,随着联网趋势的逐步增强以及网络应用程序的大量出现,所以在实际的开发中网络编程技术获得了大量的使用. 计算机网络概述 IP地址: ...

  9. APP支付 + 退款(JAVA实现)

    首先,你得先有微信开发平台账号密码还需要开通应用,然后还有微信服务商平台商户版账号(这些我都是给产品经理拿的) 其次我认为你先去看一看微信开发平台的文档!  https://pay.weixin.qq ...

  10. mongoengine中collection名称自动生成机制浅探

    项目碰到要使用mongodb的场景,以前只听过这一强大的文档数据库,但一直没有真正使用过,参考一下项目中已有的使用代码,是通过import mongoengine这一模块实现python服务对db中c ...