• 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. MySQL笔记<一>创建数据库和表

    参考博客 https://www.cnblogs.com/sqbk/p/5806797.html https://www.cnblogs.com/tomasman/p/7151962.html

  2. Mac OS 安装 独立的asio库

    先安装boost,见前文,然后上官网下载不带boost的asio,版本为:asio-1.12.2 cd到下载的库目录,配置 ./configure --with-boost="boost的安 ...

  3. Win7。56个进程让我头疼

    乱七八糟的进程一个一个往外蹦,如此痛苦. 安装了一个VM9,进程数量+5,安装了卖咖啡的,进程数量+5. 除去这10个,系统进程数量还有46个....还是太多... 64位系统,真的很痛苦,还没有怎么 ...

  4. IE9没有内置鼠标手势,还要自己写

    写了个IE插件,然后获取鼠标,信息, 模拟了鼠标手势,在虚拟机里面测试,完全好使,但是现在又不敢在Win7上用了. 愁死了... 为了实现一个鼠标手势. 写的那破玩意,竟然50多K.....太大了.. ...

  5. 按照in条件排序

    --按照in中条件排序 ,,,) order by instr('395,396,399,313',ghdm);

  6. 2019阿里云开年Hi购季新用户分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  7. 一些windows server的操作

    windows server2008R2的一些操作和arcgis9.3 服务和arcgis9.3安装 1.在虚拟机中安装: https://jingyan.baidu.com/article/0eb4 ...

  8. Ajax中post方法400和404的问题

    1.从400变成404 我相信有很多人都用过Ajax技术来获取数据,一般都是使用get来获取的,但是敏感信息就不能继续用get了,于是就换成了post,但是用post的时候有时候发生一些奇怪的事情,比 ...

  9. mysql各个引擎区别

    1.如果你有一个 MyISAM 数据表包含着 FULLTEXT 或 SPATIAL 索引,你将不能把它转换为使用 另一种引擎,因为只有 MyISAM 支持这两种索引. 2. 如果你有一个数据表包含着一 ...

  10. [J2EE规范]JDBC简单例子 标签: 数据库j2eejdbcjava 2017-06-29 10:55 353人阅读 评论(12)

    JDBC是什么? JDBC是java数据库连接(Java Database Connectivity),它是用于java编程语言和数据库之间的数据库无关连接的标准Java API,就是说,JDBC是用 ...