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. Clustering and Exploring Search Results using Timeline Constructions (paper2)

    作者:Omar Alonso 会议:CIKM 2009 摘要: 截至目前(2009),通过提取文档中内嵌的时间信息来展现和聚类,这方面的工作并不多. 在这篇文章中,我们将提出一个“小插件”增添到现有的 ...

  2. 学习笔记：(转)Centos7.6安装Oracle11gR2

    目录 原文链接:https://www.cnblogs.com/qianjingchen/articles/10442445.html Windows下安装Oracle比较容易,参考博客:https: ...

  3. Python爬虫入门教程之BeautifulSoup

    模块安装 pip3 install beautifulsoup4 模块导入 from bs4 import BeautifulSoup 示例html内容 RPC是一种比较流行的RPC通信框架,由谷歌公 ...

  4. SQL-锁-事物级别

    一.锁 锁是一种安全机制,控制并发操作,防止用户读取其他用户正在更改的数据,或者多用户同时修改一个数据,从而保证事物的完整性和数据库的一致性.SQLserver 会自动强制执行锁,但是用户可以通过对锁 ...

  5. mysql-系统表的使用

    https://blog.csdn.net/wind520/article/details/38728655

  6. 对快速排序的理解以及相关c++代码

    快速排序:在一组数据中,可以将左边的数字当作枢轴(右边也可以),接下来要做的就是,先从右边找到比枢轴小的数, 再从左边找到比枢轴大的数,接着将这两个数进行交换,重复上述步骤找出所有符合条件的数进行交换 ...

  7. WUSTOJ 1276: 峰峰不搞G（Java）

    1276: 峰峰不搞G 题目   给 n 数量的油漆,写出最大的数,每个数对应有油漆的花费.更多内容点击标题. 分析   我读完题,就想到用动态规划,结果是Time Limit Exceed.然后看了 ...

  8. 列表初始化（list initialization）

    列表初始化啊就是大括号来初始化: 列表初始化的好处:

  9. 数据库设计_ERMaster安装使用_PowerDesigner数据设计工具

    数据库设计 1. 说在前面 项目开发的流程包括哪些环节 需求调研[需求调研报告]-- 公司决策层 (1) 根据市场公司需求分析公司是否需要开发软件来辅助日常工作 (2) 公司高层市场考察,市场分析,决 ...

  10. windows环境下 快速杀死占用端口的进程

    保存为bat脚本,设置需要解除占用的端口 port,点击运行即可 @echo off setlocal enabledelayedexpansion set prot = 8022 for /f &q ...