Height

返回当前文档中的<body>元素的高度

clientHeight

对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 包含 padding

scrollHeight

scrollHeight的值在有滚动条的情况下包括滚动条滚动出去的内容，没有滚动条时是和clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

有滚动条 scrollHeight  包含 溢出的内容+padding

没有滚动条 scrollHeight  = clientHeight  

offsetHeight

包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

offsetHeight 包含 border+padding+元素的水平滚动条

scrollTop

一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

offsetTop

当前元素相对于其 offsetParent 元素的顶部内边距的距离。就是当前元素顶部距离最近父元素顶部的距离

clientTop

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距

参考资料：搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop的更多相关文章

  1. offsetHeight, clientHeight与scrollHeight的区别

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

  2. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别

    二.也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框,但是注意哦,木有加margin哦,当然一般也木有啥需要把margin加进去的,以上代码为例,结果显示上图h2 ...

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

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

  4. 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

    1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {    ...

  5. offsetHeight、scrollHeight、clientHeight、height

    对这几项进行彻底研究. 第一步:纯净div,没有margin,padding,border,height设置为200px. 添加滚动条,overflow:scroll,结果div的高度被压缩,因为被滚 ...

  6. clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight

    clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...

  7. scrollHieght、offsetHeight、clientHeight、width、height

    1.scroll滚动(scrollTop.Left.Height.Width) scroll()当用户滚动指定的元素时,会发生 scroll 滚动事件: scrollWidth.scrollHeigh ...

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

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

  9. javascript - 所有的视图属性和方法（offsetHeight、clientHeight、scrollHeight、innerHeight等）

    注意:本文只简单的介绍了各个视图的属性和方法.如果想要知道兼容性或者更多,请至文章底部参考链接处. 本文内容分为五大部分: Window视图属性 innerHeight 和 innerWidth ou ...

  10. js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结

    今天再次遇到了offset***.client***.scroll***的这三类属性的问题,总是混淆,现归纳总结如下: 大体上来说可以这样理解: client***属性(clientWidth.cli ...

随机推荐

  1. spring boot 单选按钮

    jsp代码 性别: <form:radiobutton path="xb" value="男"/>男 <form:radiobutton pa ...

  2. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  3. solr新建core

  4. C++:标准模板库map

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能. 命名空间为std,所属头文件<map> 注意:不 ...

  5. PHP生成有背景的二维码图片

    Hart QR Code 快速生产带背景的二维码,他为你提供了以下功能 生产原始二维码,可配置url或则text,以及二维码大小 生产带背景带二维码,背景大小是你传入带背景大小,可配置原始二维码大小, ...

  6. unicode 格式 转汉字

    function decodeUnicode($str){ return preg_replace_callback('/\\\\u([0-9a-f]{4})/i', create_function( ...

  7. s5p6818 从SD卡启动程序（制作SD启动卡）

    背景: 最近在学习uboot,其中有一步很重要的任务就是需要实现uboot 的验证,没有办法验证uboot是不是自己做的,那么整个开发就会收到阻碍.另外,从公司现在开发的板子来看,uboot从sd卡启 ...

  8. 使用QSaveFile类安全的读写文件（继承自QFileDevice，与QFile并列）

    QSaveFile类也是一种I/O设备,来用来读写文本文件和二进制文件,但使用该类的话,在写入操作失败时不会导致已经存在的数据丢失. 该类在执行写操作时,会先将内容写入到一个临时文件中,如果没有错误发 ...

  9. 轻松搭建CAS 5.x系列(9)-登录后显示通知信息

    概述说明 用户在账号名密码认证通过后,CAS可以跳转到登陆完成页面前,显示相关的通知页面. 搭建步骤 `1. 首先,您需要有个CAS Server端 如果您没有,可以按照我之前写的文章<轻松搭建 ...

  10. 设计模式（四）——代理模式(Proxy)

    代理模式的参与者有:一个约束.一个代理者.一个被代理者.一个调用者 代理模式的实现很简单:还是那个房子,对于开门这个操作,我更换了一个远程解锁的门,那么我就可以通过这个远程连接的服务器远程解锁,这样我 ...