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. Java基础系列-substring的原理

    原创文章,转载请标注出处:https://www.cnblogs.com/V1haoge/p/10755235.html JDK 6和JDK 7中substring的原理及区别 substring(i ...

  2. vue 强制组件重新渲染

    参考链接:https://blog.csdn.net/zyx1303031629/article/details/86656785

  3. 利用Python进行数据分析_Numpy_基础_3

    通用函数:快速的元素级数组函数 通用函数,是指对数组中的数据执行元素级运算的函数:接受一个或多个标量值,并产生一个或多个标量值. sqrt 求平方根 np.sqrt(arr) exp 计算各元素指数 ...

  4. C++浮点数据的输出控制

    #include <iostream> #include <Windows.h> using namespace std; int main(void) { double va ...

  5. go slice切片注意跟数组的区别

    一个 slice 会指向一个序列的值,并且包含了长度信息. []T 是一个元素类型为 T 的 slice. [2]string 这样定义久是字符数组 []string 这样定义就是切片 表面上看切片就 ...

  6. Lucene全文检索_分词_复杂搜索_中文分词器

    1 Lucene简介 Lucene是apache下的一个开源的全文检索引擎工具包. 1.1 全文检索(Full-text Search)  1.1.1 定义 全文检索就是先分词创建索引,再执行搜索的过 ...

  7. 2019牛客多校四 E. triples II (容斥)

    大意: 给定$n,a$, 求$n$个$3$的倍数, $or$和为$a$的方案数. 简单容斥题 可以求出$f_{x,y}$表示所有$3$的倍数中, 奇数位不超过$x$个$1$, 偶数位不超过$y$个$1 ...

  8. Docker使用整理

    Docker技术的基础: namespace,容器隔离的基础,保证A容器看不到B容器. 6个名空间:User,Mnt,Network,UTS,IPC,Pid cgroups,容器资源统计和隔离.主要用 ...

  9. 取代Ajax.BeginForm的ajax使用方法

    原文:取代Ajax.BeginForm的ajax使用方法 一.前提概要 Asp.net core中已经取消了Ajax.BeginForm,也不会计划出ajax tag helper,所以得利用插件jq ...

  10. T4模板使用笔记

    路径获取 ① 获取当前解决方案路径 string solutionsPath = Host.ResolveAssemblyReference("$(SolutionDir)"); ...