先分别介绍以下，以下资料来自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. ZT Android的引用计数(强弱指针)技术及一些问题

    Android的引用计数(强弱指针)技术及一些问题 分类: Android 2013-06-07 18:25 844人阅读 评论(4) 收藏 举报 目录(?)[+] Android C++框架层的引用 ...

  2. js布局库

    1.viz.js The solution was that someone cross compiled Graphviz to Javascript using llvm + emscripten ...

  3. Windows和Linux环境，网络异常模拟测试方法【转载自光荣之路微信公众号】

    1.网络异常的分类 在系统的运行过程中,可能会遇到各种各样的网络问题,其中主要可能出现的问题有 网络延迟:当网络信息流过大时,可能导致设备反应缓慢,造成数据传输延迟: 网路掉包:网路掉包是在数据传输的 ...

  4. php模式设计

    1,策略模式 2,个体模式 3,工厂模式 4,观察者模式 <?php class ExchangeRate { static private $instance = NULL; private ...

  5. 1、Python代码初识

    由于python2.7版本默认使用的是ASCII码,必须在编写前加入两行代码,表示使用UTF-8码. #!/usr/bin/python # -*- coding:utf-8 -*- print('你 ...

  6. 【[ZJOI2012]灾难】

    好像很久之前就看过这道题,大概是刚学\(LCA\)的时候 之后当时肯定是不会的呀 现在发现这道题并不是非常难 首先我们发现这个灭绝的关系非常像一棵树,我们建出这个灭绝树求一个前缀和就可以啦 那么应该怎 ...

  7. [Java123] Java中的System.exit

    参考:http://www.cnblogs.com/xwdreamer/archive/2011/01/07/2297045.html System.exit(int  status) 方法 java ...

  8. virtualbox+vagrant学习-4-Vagrantfile-7-WinRM Settings

    WinRM Settings 配置命名空间config.winrm config.winrm配置与如何通过winrm配置vagrant访问你的Windows客户相关.与大多数vagrant设置一样,默 ...

  9. sql连接查询INNER JOIN，LEFT JOIN，RIGHT JOIN区别

    测试表 课程表cource 教师表teacher 查询老师教的课程 1.inner join内链接 ,只显示完全匹配的查询结果 SELECT  cource.cname,teacher.tname f ...

  10. 【转】上传jar包到nexus私服

    原文:https://my.oschina.net/lujianing/blog/297128 1通过网页上传 这种方法只是上传了jar包.通过maven引用当前jar,不能取得jar的依赖 from ...