浅谈style.height、clientHeight、offsetHeight、scrollHeight
先分别介绍以下，以下资料来自MDN
HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
Element.clientHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。
Element.scrollHeight 是一个只读属性，是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
|
style.height |
clientHeight |
offsetHeight |
scrollHeight |
|
|
所属对象 |
Object |
Element |
HTMLElement |
Element |
|
获取高度 |
内联样式高度 |
元素高度+内边距 |
元素高度+内边距+边框+滚动条 |
元素高度+内边距+伪元素 |
|
不包含滚动条 |
不包含伪元素 |
|||
|
出现滚动条 |
可见部分高度 |
元素所有部分 |
||
|
读写属性 |
读写 |
只读 |
只读 |
只读 |
#本文有写的不好或不对的地方还请各位指出，一起学习！#
浅谈style.height、clientHeight、offsetHeight、scrollHeight的更多相关文章
- clientHeight & offsetHeight & scrollHeight
clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...
- style.height、offsetHeight、clientHeight、scrollHeight的差别
style.height 包含元素的滚动栏,不包含边框 clientHeight 不包含元素的滚动栏和边框 offsetHeight 包含元素的滚动栏和边框 scrollHeight offsetHe ...
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- 关于body/documentElement ---->clientHeight, offsetHeight, scrollHeight
http://blog.csdn.net/woxueliuyun/article/details/8638427 http://blog.sina.com.cn/s/blog_9dd702d50101 ...
- clientHeight,offsetHeight,scrollHeight迷一样的三个值
https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571 推荐 o ...
- 浅谈style.,currentStyle,getComputedStyle,getAttribute
xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- 浅谈FileReader
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 了解https://develope ...
- height、clientHeight、scrollHeight、offsetHeight区别
转自 http://www.cnblogs.com/yuteng/articles/1894578.html 我们来实现test中的onclick事件 function justAtest() ...
随机推荐
- 关于CSS中的元素定位
---恢复内容开始--- CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定 ...
- [BZOJ 1972][Sdoi2010]猪国杀
1972: [Sdoi2010]猪国杀 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 364 Solved: 204[Submit][Status][D ...
- npm 使用国内镜像的方法
npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便.我们通过设置使用淘宝的镜像来加快我们的速度. 临时使用 n ...
- TcpListerner、TcpClient 、邮件发送MailMessage、SmtpClient类
一.服务端 TcpListener server = );//定义监听器 server.Start();//启动监听器 ]; //创建一个容器用于接受数据 string data = null; wh ...
- Wannafly挑战赛18 E 极差（线段树、单调栈）
Wannafly挑战赛18 E 极差 题意 给出三个长度为n的正整数序列,一个区间[L,R]的价值定义为:三个序列中,这个区间的极差(最大值与最小值之差)的乘积. 求所有区间的价值之和.答案对\(2^ ...
- 阿里八八“好记”——UML设计
团队分工 叶文滔:软件整体框架部分 俞鋆:后端数据库部分 王国超:日程多日显示部分 黄梅玲:日程详细显示部分 张岳.刘晓.李嘉群:用户部分 UML设计 整体框架 用例图 类图 活动图 状态图 数据库部 ...
- Salesforce平台支持多租户Multi tenant的核心设计思路
Multitenancy is the fundamental technology that clouds use to share IT resources cost-efficiently an ...
- scala当中的文件操作和网络请求
1.读取文件当中每一行的数据 def main(args: Array[String]): Unit = { //注意文件的编码格式,如果编码格式不对,那么读取报错 val file: Buffere ...
- java 包（package）
package packageDemo2_5; public class packageDemo1 { String name;//同一个包里的类可以直接访问 //不同包里的类是不可以使用默认修饰符的 ...
- IOS XMPP总结
//前言:仿weixin实现一个即时通讯的案例,支持版本7.0以上 "准备工作 创建项目时使用git" /* 显示隐藏文件,看到git的文件夹 defaults write com ...