clientHeight和offsetHeight
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
scrollTop //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
返回值是一个整数,单位是像素。此属性是可读写的。
offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。
所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数,单位是像素。此属性是只读的。
clientHeight和offsetHeight的更多相关文章
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 详解clientHeight、offsetHeight、scrollHeight
关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.av ...
- innerHeight,clientHeight,offsetHeight,scrollWidth等的区别和用法
要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的 ...
- height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别
1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当 box-sizing: content-box 时,高度应用到元素的内容框. ...
- clientHeight scrollHeight offsetHeight
<div style="height:200px;padding:10px;border:1px solid green;"></div> 对于上面的di ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
- scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解
开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...
- clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight
clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
随机推荐
- SQL:百科
ylbtech-SQL:百科 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用于存取数据以及查询.更新和管理 ...
- cat中文正常vi中文乱码
Linux cat中文正常vi中文乱码 问题示例 出现此问题,有可能是vim 编辑器的配置编码方面的问题. 出现此情况,在vim 编辑器中输入 :e ++enc=utf8 :e ++enc=zh_CN ...
- jdk1.8 HashMap & ConcurrentHashMap
JDK1.8逐字逐句带你理解ConcurrentHashMap https://blog.csdn.net/u012403290 JDK1.8理解HashMap https://blog.csdn.n ...
- JVM调优小结
JVM调优浅谈 https://www.cnblogs.com/andy-zhou/p/5327288.html 1.数据类型 java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类 ...
- c++ STL之unordered_map
1.1 特性 关联性:通过key去检索value,而不是通过绝对地址(和顺序容器不同) 无序性:使用hash表存储,内部无序 Map : 每个值对应一个键值 键唯一性:不存在两个元素的键一样 动态内存 ...
- openstack思维导图
RABBITMQ memcache keystone glance nova neutron cinder horizon
- lua学习笔记1--基础语法
print("打印日志");--单行注释 --[[ 多行注释 --]] a = --变量的类型,是由变量储存的数据决定 数据类型: number:数值类型,可以存储整数和小数 bo ...
- epoll 数据库安装以及相关概念
epoll select 只能同时处理1024个客户端, 多线程会遇到资源瓶颈,什么才是解决高并发最有效的方式呢 linux中提供了epoll 这种多路复用的IO模型,注意其他平台没有相应的实现 所以 ...
- day33 网络编程之UDP与进程了解
UDP 什么是UDP协议 在上节课的练习中,使用TCP进行网络编程时,我们会遇到粘包问题,这是因为TCP是流式协议,而今天学习的UDP协议不是流式协议,其发送的数据是数据报格式的,在进行数据发送时该协 ...
- PTA一般问题汇总与解答
在进行PTA作业完成的过程中,大家很积极在完成作业,然后在不懂的地方,有许多的同学也向助教们提出了问题,我们在这里将大家的问题进行了一下汇总然后逐一解答. 1输出中常遇到的问题. 这个图片里我将同学们 ...