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. canvas画箭头demo

    效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...

  2. ELK优化难题解决

    你头疼的ELK难题,本文几乎都解决了 一.ELK实用知识点总结 1.编码转换问题 这个问题,主要就是中文乱码. input中的codec=>plain转码: codec => plain ...

  3. rest_framework之ModelViewSet、路由控制、序列化组件快速搭建项目雏形

    以UserInfo表登陆接口为例 ModelViewSet的用法十分简单,定义一个视图类,指定一个模型表,指定一个序列化类即可帮我们完成增删改查等功能 示例: # 视图层 from app01.MyS ...

  4. annotation @Retention@Target

    一.注解:深入理解JAVA注解 要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前,我们就必须要了解Java为我们提供的元注解和相关定义注解的语法. 1.元注解(meta-a ...

  5. ROS学习（一）Ros 中使用kinect

    上的安装说明如下: 官网上明确写了如果安装windows kinect还需要安装一个驱动,但是有些ROS的书上并没有这么做,只提到了使用如下两步进行安装即可使用: sudo apt-get insta ...

  6. selenium cookie 登录

    前言 爬虫方向的小伙伴们都知道网页爬虫经常遇到的问题就是登录账户,有些简单的网站我们可以简单的send key来输入账户密码就可以登录,但是有很多网站需要验证码之类的就不太好用了,这时候就体现到了co ...

  7. 【数学】Prime-Factor Prime

    Prime-Factor Prime 题目描述 A positive integer is called a "prime-factor prime" when the numbe ...

  8. Luogu5284 十二省联考2019字符串问题（后缀树+拓扑排序）

    对反串建SAM弄出后缀树,每个b串通过倍增定位其在后缀树上对应的节点,根据其长度将节点拆开.然后每个a串也找到对应的节点,由该节点向表示a串的节点连边,再把所给的边连上跑拓扑排序即可. #includ ...

  9. Spring邮件服务：Maven + Spring SMTP Mail (可发送附件)

    1  spring-smtp-mail.xml <?xml version="1.0" encoding="UTF-8"?> <beans x ...

  10. Shell脚本基础学习

    Shell脚本基础学习 当你在类Unix机器上编程时, 或者参与大型项目如k8s等, 某些框架和软件的安装都是使用shell脚本写的. 学会基本的shell脚本使用, 让你走上人生巅峰, 才怪. 学会 ...