• clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小)
  • scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度)
  • offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距
  • window.screen.height:屏幕分辨率高document.body.scrollTop:网页被卷去的高
  • 1、clientHeight
  • clientheight=padding+height-横向滚动轴高度。如下图:
  • 2、offsetheight

  • offsetheight=padding+height+border+横向滚动轴高度
  • 3、scrollheight
  • scrollheight为内容高度,如下图的选中的元素userlists,可视高度为170px,但是内容高度为2549px;
  • 4、scrollTop

  • scrollTop网页卷起来的高度(网页向上移动过程中,跑上去看不见的部分)。可以理解为scroll top offset是滚动条相对于其顶部的偏移。

offsetheight 和clientheight、scrollheight、scrollTop区别的更多相关文章

  1. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  2. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  3. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  4. document.documentElement与body下clientHeight,scrollHeight等区别

    本次说明仅在chrom环境下,ie等其他浏览器可能不同 1获取显示屏高度(pc和移动端,屏幕分辨率px) window.screen.height => 这个好理解,不多说. 2获取浏览器可视窗 ...

  5. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  6. top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而p ...

  7. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  8. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

    平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...

  9. clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

    clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...

  10. height clientHeight scrollHeight offsetHeight的大致区别

    这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...

随机推荐

  1. android 读取.properties文件

    因为最终是通过流文件来进行properties文件读取的,所以很自然,我们想到要将文件放入到assets文件夹或者raw文件夹中了. 例如,我们这里有一个文件——>test.properties ...

  2. fixed和absolute的区别

    今天在实际项目中,写首页一屏的时候,发现页脚定位(position:absolute:)没有达到我想要的效果(不管屏幕大小,页脚始终相对浏览器底部定位).于是我觉得有点奇怪,然而我旁边的小哥说:很明显 ...

  3. java的dao层如何返回多个list

    比如一个场景 我要这样展示(相同的元素只要展示一次) 前台是这样写的 el表达式是不能对数据进行处理的,所以数据有重复的那么就一定会显示出来 所以,考虑,能不能直接在dao中查询的时候直接返回三个li ...

  4. spring mvc 引入log4日记记录maven工程 slf4j和log4j输出到控制台配合使用log4j不输出到文件

    https://blog.csdn.net/qq_27093465/article/details/62928590 使用slf4j的优点: 提供带参数的日志输出方法(SLF4J 1.7及以后版本). ...

  5. 实时查看linux网卡流量 的base脚本

    #!/bin/bash " ] do eth=$ RXpre=$(cat /proc/net/dev | grep $eth | tr : " " | awk '{pri ...

  6. Neo4j属性图模型简单介绍

    本文主要是对Neo4j属性图模型简单的介绍. Neo4j是什么? Neo4j是一款是由java语言实现的图数据库,图形数据库将数据以图的数据结构进行存储和管理,并且能够以高度可问的方式优雅地表示任何种 ...

  7. BP神经网络分类应用

    DNA序列分类  作为研究DNA序列结构的尝试,提出以下对序列集合进行分类的问题:有20个已知类别的人工制造序列,其中序列标号1-10为A类,11-20为B类.请从中提取特征,构造分类方法,并用这些已 ...

  8. 【《Objective-C基础教程 》笔记】(八)OC的基本事实和OC杂七杂八的疑问

    一.疑问 1.成员变量.实例变量.局部变量的差别和联系,在訪问.继承上怎样表现. 2.属性@property 和 {变量列表} 是否同样.有什么不同. 3.类方法.类成员.类属性:实例方法.实例变量. ...

  9. 报错OPTION SQL_SELECT_LIMIT=

    org.quartz.JobPersistenceException: Couldn't acquire next trigger: You have an error in your SQL syn ...

  10. 总结 ESP8266 RTOS 开发环境搭建

    总结 ESP8266 RTOS 开发环境搭建 仔细看官方文档. 必须一步一步操作. 不要想当然,以为 make 就可以. 忽略编译警告,除非是错误. 工具链必须使用官方提供的. 多看看 Issues ...