clientHeight、offsetHeight、innerHeight、ouerHeight 区别

2024-04-04 14:02:59

innerHeight 和 outerHeight 是window 对象的只读属性， clientHeight 和 offsetHeight 是DOM 元素属性，接下来看看他们之间的有什么区别。

clientHeight vs offsetHeight

clientHeight 是元素的只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距

offsetHeight 也是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

所以在没有滚动条和边框 border 的时候，他们是想等的

clientHeight = height + padding - 水平滚动条高度（如果存在）
offsetHeight = height + padding + border + 水平滚动条（如果存在）

window.innerHeight vs window.outerHeight

window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
window.outerHeight: 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。

如下图：

另外，在css 中我们一直使用100vh 去表示浏览器视口的高度，他和js 中的window.innerHeight 是相等的。

引用

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

clientHeight、offsetHeight、innerHeight、ouerHeight 区别相关推荐

offsetHeight, clientHeight与scrollHeight的区别
[size=xx-large][color=indigo]offsetHeight, clientHeight与scrollHeight的区别[/color][/size] [size=large][ ...
clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight o ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
scrollHeight, clientHeight, offsetHeight的区别
浏览器窗口和网页文档先明确浏览器窗口和网页文档的区别,拿下面这张图来说右边那张图中,大红色方框框起来的是浏览器窗口,而网页文档就是左边这张图.先不用去管scrollHeight这些东西,后面再解释 ...
clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
浏览器窗口尺寸clientHeight / scrollHeight / offsetHeight / innerHeight
https://www.cnblogs.com/nanshanlaoyao/p/5964730.html clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取 ...
height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
html元素的 height、clientHeight和offsetHeight之间的区别
height:指元素内容的高度 ,jQuery中的height()方法返回的就是这个高度. clientHeight:内容高度+padding高度 ,jQuery中的innerHeight()方法 ...
关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
clientHeight.offsetHeight.scrollHeight等的区别
查看了博文http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html 然后自己写一下加深印象. clientHeight:可见高度 ...

最新文章

热门文章