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滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
随机推荐
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- 两个input之间有空隙,处理方法
修改css,给前边一个input添加一个左浮动. <input id="day" type="button" value="日" ...
- [Hadoop] Yarn & k8s
写在前面 一.大数据全栈 头两节讲完HDFS & MapReduce,这一部分聊一聊它们之间的“人物关系”. 其中也讨论下k8s的学习必要性. Ref: [Distributed ML] Yi ...
- iscsi序列二、iscsi多路径配置方式
一.ISCSI多路径应用 如果存储服务器到交换机只有一条线路的时候,那么一条线路出线故障,整个就没法使用了,所以多线路可以解决这个问题,避免单点故障 如上图,如果SAN服务器与客户端交换机只有一条线路 ...
- 解读GitHub EntityComponentSystemSamples
出自Unity官方的ECS项目示例,该项目的第一次Commit是在2018年3月20号,距离现在一年半的时间,这期间ECS本身的生态在快速发展,稳定性也是逐步提升,期待在2020年的Unity版本中作 ...
- keepalived脑裂问题
一.对脑裂的理解 在高可用(HA)系统中,当联系2个节点的“心跳线”断开时,本来为一整体.动作协调的HA系统,就分裂成为2个独立的个体.由于相互失去了联系,都以为是对方出了故障.两个节点上的HA软件像 ...
- VAEs(变分自编码)之keras实践
VAEs最早由“Diederik P. Kingma and Max Welling, “Auto-Encoding Variational Bayes, arXiv (2013)”和“Danilo ...
- Kettle作业的自带定时任务
文章出处:https://blog.csdn.net/jianlong727/article/details/53966286 7.1.新建作业 7.2.部署作业 在“核心对象”中拖拽两个图标到执行区 ...
- Maven Web 工程
本教程将教您如何在Eclipse中创建 Archetype为 maven-archetype-webapp的Maven项目,也就是web工程. 创建Maven工程 第一步,启动Eclipse,依次打开 ...
- js 返回一个数组里面0出现的次数
var num = new Array(10000).fill('').map((item,index) => (index + 1)). 在点号后面补充代码,让num是这个数组中0出现的次数, ...