浅谈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() ...
随机推荐
- 编写VBA宏生成页面
概述 依据详细设计中表设计,借用excel宏编写VBA生成页面. 特色 高定制.高效率.兼容所有生成要求.不依赖低耦合.任意Sheet适用 缺陷 不支持批量Sheet页生成 VBA源码 Sub lis ...
- 一个简单的使用matplotlib作图的例子
#使用matplotlib作图 import numpy as np import matplotlib.pyplot as plt #x = np.linspace(start, stop, num ...
- 字符串String及字符Char的相关方法
一.字符串: 1.访问String中的字符: string本身可看作一个Char数组. string s = "hello world"; ; i < s.Length; i ...
- TensorFlow函数（五）参数初始化方法
1.初始化为常量 tf.constant_initializer(value, dtype) 生成一个初始值为常量value的tensor对象 value:指定的常量 dtype:数据类型 tf.ze ...
- 【金融123】CNY和CNH的差异和关联
https://www.sohu.com/a/117406459_473263 离岸人民币(CNH)与在岸人民币(CNY) 差异: CNY CNH 法律监管限制 在岸人民币受大陆市场的管制,外汇和 ...
- EF直接的一對多多對多多對一的關係----也即是鏈錶查詢
基于EF4.1 code first 简单的CRUD 园子中已经有很多了 ~~ 真不想再写这个了 可是为了做一个完整的小demo 从开始 到后面的一些简单重构 还是决定认真把这个写出来 争取写些别人 ...
- postman请求失败
注意右上角 我点亮了左边的图标,导致任何请求都没法获取到结果,后来知道是右上角的问题,然后就可以成功请求了
- maven 编译替换占位符
首先开启资源配置的插件,由此插件替换占位符 <plugin> <groupId>org.apache.maven.plugins</groupId> <art ...
- Linux 内核版本号查看
简要:1,lsb_release -a 查看linux系统版本 2,uname -a 查看内核版本
- Oracle分析函数巧妙使用
在 Oracle中使用Sql必须弄懂分析函数 Oracle开发专题之:分析函数(OVER) 1 Oracle开发专题之:分析函数2(Rank, Dense_rank, row_number) 6 Or ...