浅谈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() ...
随机推荐
- FTP(文件传输协议)工作原理
目前在网络上,如果你想把文件和其他人共享.最方便的办法莫过于将文件放FTP服务器上,然后其他人通过FTP客户端程序来下载所需要的文件. 1.FTP架构 如同其他的很多通讯协议,FTP通讯协议也采用客户 ...
- [T-ARA][SEXY LOVE]
歌词来源:http://music.163.com/#/song?id=22704402 作曲 : 新沙洞老虎/崔圭成 [作曲 : 新沙洞老虎/崔圭成] [作曲 : 新沙洞老虎/崔圭成] 作词 : 新 ...
- 利用Fiddler2和Proxifier分析你用的中国菜刀是否带有后门
为了避免自己辛辛苦苦拿下的站点被一些拿来主义者不费吹灰之力就据为己有,下面来教大家如何检测菜刀有没有留后门. 对于有没有后门这个问题,大牛们会说抓包看一下就行了,那如何抓包呢?有很多软件可以,这里使用 ...
- css3优惠券
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- java中JVM的原理重温【转】
一.基础理论知识 1.java虚拟机的生命周期: Java虚拟机的生命周期 一个运行中的Java虚拟机有着一个清晰的任务:执行Java程序.程序开始执行时他才运行,程序结束时他就停止.你在同一台机器上 ...
- BZOJ3769:BST again(记忆化搜索DP)
Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第一行一个整数T,表示数据组数. 以下T行,每行2个整数n和h ...
- 【[HNOI2004]敲砖块】
非常巧妙的\(dp\)顺序 这道题如果按照最正常的顺序来\(dp\)的话,显然是没有办法做的,后效性太大了 所以我们可以巧妙的改变\(dp\)的顺序 我们注意到一个位置\((i,j)\)要被打到的话就 ...
- Linux下安装PHP并在nginx服务器中进行配置的详细方法
先介绍一下使用的环境:centos 7.4, PHP 7.0 , nginx 1.12 Linux系统版本可以通过命令:lsb_release -a 查看. 现在开始步入正题了! 1. 首先查看一下 ...
- 轻量ORM-SqlRepoEx （十二）SqlRepoEx 2.0.1 至 2.2.0 版本更新说明
一.功能变化 (一).强化特性支持 1.部分类型拥有复杂属性: 2.有些属性不是来源于数据库 3.用户在原来的代码中使用 SqlRepoEx ,减少字段与数据库字段之间的冲突: 4.为支持新的特性及优 ...
- Java Activiti6.0 spring5 SSM 工作流引擎 审批流程 java项目框架
1.模型管理 :web在线流程设计器.预览流程xml.导出xml.部署流程 2.流程管理 :导入导出流程资源文件.查看流程图.根据流程实例反射出流程模型.激活挂起 3.运行中流程:查看流程信息.当前任 ...