先分别介绍以下，以下资料来自MDN

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

Element.clientHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

Element.scrollHeight 是一个只读属性，是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容

style.height

clientHeight

offsetHeight

scrollHeight

所属对象

Object

Element

HTMLElement

Element

获取高度

内联样式高度

元素高度+内边距

元素高度+内边距+边框+滚动条

元素高度+内边距+伪元素

不包含滚动条

不包含伪元素

出现滚动条

可见部分高度

元素所有部分

读写属性

读写

只读

只读

只读

#本文有写的不好或不对的地方还请各位指出，一起学习！#

浅谈style.height、clientHeight、offsetHeight、scrollHeight的更多相关文章

  1. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

  2. style.height、offsetHeight、clientHeight、scrollHeight的差别

    style.height 包含元素的滚动栏,不包含边框 clientHeight 不包含元素的滚动栏和边框 offsetHeight 包含元素的滚动栏和边框 scrollHeight offsetHe ...

  3. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  4. 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight

    http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...

  5. clientHeight,offsetHeight,scrollHeight迷一样的三个值

    https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571  推荐 o ...

  6. 浅谈style.,currentStyle,getComputedStyle,getAttribute

    xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...

  7. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  8. 浅谈FileReader

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 了解https://develope ...

  9. height、clientHeight、scrollHeight、offsetHeight区别

    转自 http://www.cnblogs.com/yuteng/articles/1894578.html 我们来实现test中的onclick事件    function justAtest()  ...

随机推荐

  1. JS实现手机摇一摇功能

    //运动事件监听 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, ...

  2. SQL server reporting service - rsReportServerNotActivated error solution

    描述: 今天在原有的数据库版本上增加了Reporting Service 功能,数据库完成安装后,没有发现ReportServer和 ReportServerTemp 两个数据库 于是从其他服务器上, ...

  3. July 29th 2017 Week 30th Saturday

    Where there is great love, there are always miracles. 哪里有真爱存在,哪里就有奇迹发生. Everyone expects there can b ...

  4. 移动App中常见的Web漏洞

    智能手机的存在让网民的生活从PC端开始往移动端转向,现在网民的日常生活需求基本上一部手机就能解决.外卖,办公,社交,银行转账等等都能通过移动端App实现.那么随之也带来了很多信息安全问题,大量的用户信 ...

  5. int vs Integer

    在项目开发过程中,有时候在选择int还是Integer会有些纠结.今天就来聊一下这个问题.当然,下面所说的基本也适用于java中其他基本类型和其包装类型. Definitions: int是原始类型, ...

  6. HashMap源代码解析

    HashMap原理剖析 之前有看过别人的HashMap源代码的分析,今天尝试自己来分析一波,纯属个人愚见.听一些老的程序员说过,当别人跟你说用某样技术到项目中去,而你按照别人的想法实现了的时候,你只能 ...

  7. CF 553E Kyoya and Train

    题目分析 期望\(\text{dp}\). 设\(f_{i,j}\)表示在第\(j\)个时刻从\(i\)点出发,到达终点的期望花费. 有转移方程: \[ f_{x,t}=\min_{(x,y)\in ...

  8. IE6/IE7不支持first-child的解决办法

    #sidebar li:first-child{ border-top-style:none; } #sidebar li{ border-top-width:1px; border-top-styl ...

  9. Struts2学习总结——文件上传与下载

    Struts2文件上传与下载 1.1.1新建一个Maven项目(demo02) 在此添加Web构面以及 struts2 构面 1.2.1配置Maven依赖(pom.xml 文件) <?xml v ...

  10. Delphi XE10在 Android下调用静态库a文件

    Delphi Seatle can link Delphi project with Static library files(*.a): 1.at Delphi IDE, Add the " ...