clientHeight / offsetHeight / scrollHeight / Window.innerHeight

最新推荐文章于 2022-01-19 20:02:05 发布
最新推荐文章于 2022-01-19 20:02:05 发布
阅读量235 收藏
点赞数
分类专栏： JS基础 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40686529/article/details/104167123
版权

在这里插入图片描述
clientHeight:

① 元素的内部高度（包括padding,但不包括可滚动部分）
② 图示在这里插入图片描述
③ 获取:element.getBoundingClientRect()

scrollHeight
① 是clientHeight+可滚动的内容部分
② 在这里插入图片描述

offsetHeight:
① 边框高度+内边距+内容高度+可滚动高度
②图示
在这里插入图片描述
③ 获取：element.getBoundingClientRect()

③ 获取：getBoundingClientRect()

innerHeight
① 浏览器窗口的视口高度（不包括工具栏，包括可滚动的高度）
② 图示
在这里插入图片描述
③ 获取：window.innerHeight

浅端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
10-27
例如，可以使用JavaScript的if-else语句或者现代浏览器支持的特性检测（feature detection）方法来选择使用document.documentElement的clientWidth和clientHeight还是window.innerWidth和window.innerHeight属性。...
前端vue.js
09-11
window.innerHeight // 浏览器窗口的内部高度 window.innerWidth // 浏览器窗口的内部宽度 ``` - **兼容写法** (适用于所有浏览器)： ```javascript var w = document.documentElement.clientWidth || ...
innerHeight与clientHeight、innerWidth与clientWidth
weixin_30887919的博客
12-13 871
window对象： （1）innerHeight属性：窗口中文档显示区域的高度，不包括菜单栏、工具栏等部分。该属性可读可写。 IE不支持该属性，IE中body元素的clientHeight属性与该属性相同。 （2)innerWidth属性：窗口中文档显示区域的宽度，同样不包括边框。该属性可读可写。 IE不支持该属性，IE中body元素的clientWidth属性与...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offset
deng131的专栏
05-18 198
在html中，任何一个元素都有三个表示位置和大小的对象：client,offset和scroll，每个对象都有相应的 height，width,top,left属性，那么这些究竟有什么区别呢？ client属性是指一个元素直接可以看得到不包括边框的区域，所谓的直接可以看得到不包括边框是这样的概念：不包括滚动条占据的空间（实际上，如果出现了滚动条，元素的高度不会发生变化，clientH...
scrollHeight innerHeight clientHeight offsetHeight
zhaohanqq的博客
05-17 197
scrollHeight https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight window.innerHeight; 获取屏幕高度 window.screen.width 屏幕分辨率 clientHeight 视野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距； offsetHeight 在c...
【JS中innerHeight/Width、clientHeight/Width和offsetHeight/Width使用及其详解】
Linxuejie_1030的博客
01-19 2836
JS中innerHeight/Width、clientHeight/Width、offsetHeight/Width属性详解
JS：screen/client/offset/scroll/inner/avail的width/left
u011587399的专栏
03-14 608
1、名词解释 screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目标甲相对目标乙的距离。scroll：卷轴、卷动。指的是包含滚动条的的属性。inner：内部。指的是内部部分，不含滚动条。avail：可用的。可用区域，不含滚动条，易与inner混淆。
javascript 获取当前页面可视高度和宽度及浏览器宽度和高度的函数.pdf
11-23
if (window.innerHeight && window.scrollMaxY) { yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ yScroll = document.body....
javascript 获取当前面可视高度和宽度及浏览器宽度和高度的函数.docx
12-05
yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // 除了IE外的所有浏览器 yScroll = document.body.scrollHeight; } else { // ...
javascript获取网页宽高方法汇总.docx
01-18
5. `window.innerHeight` 和 `window.innerWidth` 这两个属性返回浏览器窗口的内部高度和宽度，不包括工具栏和地址栏。这通常用于获取用户实际可用于网页显示的区域大小。 6. `window.screenTop` 和 `window....
简洁明了clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop、height、innerHeight、outerHeight
Damon99999的博客
04-29 549
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下： clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度，其中： clientHeight：包...
clientHeight、offsetHeight、innerHeight、ouerHeight 区别
qq_40890601的博客
12-19 3852
innerHeight 和 outerHeight 是window 对象的只读属性， clientHeight 和 offsetHeight 是DOM 元素属性，接下来看看他们之间的有什么区别。 clientHeight vs offsetHeight Element.clientHeight 是元素的只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距 HTMLElement.offsetHeight 也是一个只读属性，
height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别...
weixin_34304013的博客
11-29 529
1.height height是css属性,这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。 当 box-sizing: content-box 时,高度应用到元素的内容框。 当 box-sizing:border-box时,高度包含了内容框、内边距和边框。 2.clientHeight Element.clientHeight只读属性是没有的CS...
关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览
likeuzi的博客
02-09 384
https://www.cnblogs.com/layaling/p/6223372.html
JavaScript---关于height/offsetHeight/clientHeight/innerHeight/outerHeight的区分说明
COCOLI_BK的博客
04-27 336
对应属性的说明height()为h1offsetheight()为h2clientHeight()为h3innerHeight()为h3outerHeight(options)为h2，options为true则包含上下margin 直接上图： height()为h1 它主要是返回元素的高度或者说这个div的内容的高度，它是jquery对像 offsetheight()为h2 它返回的高度是内容高+padding+边框，不包含margin值 clientHeight()为h3 clientHeight在页面
clientHeight、offsetHeight、scrollHeight三者区别与浏览器表现
Soochow_zhangyu的博客
11-26 1370
提要 clientHeight指客户区高度，本应该返回浏览器可见区域高度，但是，前面的元素如果不是documentElement，则返回盒子高度（包括填充和边框） offsetHeight指偏移之后的高度，offsetTop和offsetLeft分别指当前元素相对于父元素的偏移（也就是外边距），故offsetHeight则是指元素本身高度（包括填充和边框），不过，在IE11以下的版本，如果前缀元...
js中getBoundingClientRect()方法详解
热门推荐
汉堡请不要欺负面条
05-18 13万+
一.getBoundingClientRect()分析getBoundingClientRect()获取元素位置，这个方法没有参数getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。 该函数返回一个Object对象，该对象有6个属性：...
关于clientHeight、scrollHeight、offsetHeight、window.innerHeight、window.outerHeight等元素及浏览器属性浅析
qq_44382590的博客
09-20 2434
前几天笔试碰到了一道关于可视区域高度通过什么属性取值的问题，面对四个选项一脸傻样儿，赶紧复习了一下。发现element的clientHeight、scrollHeight、offsetHeight和window的outerHeight、innerHeight、screen.height这几个属性还真不好区分，在网上查阅一番资料后，总结出来供以后参考。 这篇文章会说明documentElement（html）、body、普通的element（如div）作为Element对象...
// 可见区域高度 let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
最新发布
06-13
这也是一段 JavaScript 代码，它的作用是获取当前浏览器窗口的可见区域高度。其中，`window.innerHeight`表示浏览器窗口的内部高度，`document.documentElement.clientHeight`表示文档根元素的可见高度，`document.body.clientHeight`表示文档body元素的可见高度，三者取最小值作为可见区域高度。这段代码可以在网页开发中用于实现响应式布局效果，使网页可以适应不同大小的浏览器窗口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值