先分别介绍以下，以下资料来自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. 4 Dockerfile指令详解 && COPY 指令

    COPY 指令将从构建上下文目录中 <源路径> 的文件/目录复制到新的一层的镜像内的 <目标路径> 位置.比如: COPY package.json /usr/src/app/ ...

  2. Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.

    System.Data.OracleClient 已经过时了.微软不再支持它. 因此,我建议你为. NET 使用Oracle数据提供程序:ODP.Net. 你可以从以下位置下载: 版本:Release ...

  3. 如何将本地项目上传至GitHub

    首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: https://gi ...

  4. Tomcat中容器是什么以及容器与容器之间的数量关系。

    Tomcat容器到底是什么 学java有一小段时间了,一直使用Tomcat,也知道Tomcat是一个大的Servlet容器,里面还有许多子容器,容器之间都是相互嵌套的.也看过一下接收Tomcat的文章 ...

  5. MySQL 分库分表方案，总结的非常好！

    前言 公司最近在搞服务分离,数据切分方面的东西,因为单张包裹表的数据量实在是太大,并且还在以每天60W的量增长. 之前了解过数据库的分库分表,读过几篇博文,但就只知道个模糊概念, 而且现在回想起来什么 ...

  6. 【vue】饿了么项目-页面骨架开发

    1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...

  7. [教程] macOS打开原生的NTFS读写功能

    Mac本身实际上是支持原生的NTFS读写的,只不过这一功能被隐藏了,但是可以手动打开,这比第三方的的工具要安全得多,有时第三方工具可能会发生整个NTFS分区数据丢失的情况,下面是打开MAC原生NTFS ...

  8. Java8 Stream()关于在所有用户的所有上传记录中，找出每个用户最新上传记录

    原创文章:转载请标明出处 https://www.cnblogs.com/yunqing/p/9504196.html 首先分析相当于如下,在所有的猫中,每个名字的猫都保留年龄最小的一个 import ...

  9. Ubuntu安装MySQL/MariaDB

    安装MariaDB/MySQL MariaDB是MySQL的分支,与MySQL高度兼容,几乎所有的命令都一样.MariaDB是由前MySQL的开发人员离开Sun公司后开发的,目的是为了防止Oracle ...

  10. PHP导出excel表格

    <?php header('Content-Type: application/force-download'); header("Content-type: text/html; c ...