浅谈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() ...
随机推荐
- kafka概要设计
Kafka核心功能 即:高性能的消息发送与高性能的消息消费 下载安装包后即可启动Kafka服务器,但是此前需要首先启动Zookeeper服务器,Zookeeper是为Kafka提供协调服务的工具,Ka ...
- nodejs中命令行中参数的获取和解析
首先,假设有如下的命令行 node abc.js arg1 arg2 arg3,现在想在abc.js中获取后面的参数arg1.arg2.arg3… var args = process.argv.s ...
- Web App, Native APP,Hybird App 介绍
一.Web App 这个主要是采用统一的标准的 HTML,JavaScript.CSS 等 web 技术开发. 用户无需下载,通过不同平台 的浏览器访问来实现跨平台, 同时可以通过浏览器支持充分使用 ...
- angularJs的过滤器
一.currency 货币格式化 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...
- 【OpenCV】图像增强---灰度变换、直方图均衡化
图像增强的目的:改善图像的视觉效果或使图像更适合于人或机器的分析处理.通过图像增强,可以减少图像噪声,提高目标与背景的对比度,也可以增强或抑制图像中的某些细节. ------------------ ...
- 将git关联到pycharm
1. 安装pycharm 2. 安装git 3. 打开pycharm, 点钟File -> settings -> Version Control -> Git 该面板中,填写git ...
- UVa 12661 - Funny Car Racing（Dijkstra）
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- ethersjs运行时出现的问题
1.在运行部署在ganache1.1.0上的合约中的某个函数时,出现了这样的问题,之前部署在geth上时并没有这样的问题 userdeMacBook-Pro:test-ethers user$ nod ...
- [转]开源实时视频码流分析软件：VideoEye
原文太长了,就直接贴上链接,以便大家学习. 引文链接:开源实时视频码流分析软件:VideoEye
- 一种基于openflow的虚拟化层软件flowvisor的API测试
注明:本文并不对openflow进行分析,本人也是略略知道这个概念,对flowvisor也只是对其API有所测试,更深的源码并未涉及,只是希望该文能对以后的flowvisor研究者提供些许帮助. 一: ...