【前端】clientHeight, offsetHeight,scrollHeight, offsetTop,scrollTop

最新推荐文章于 2023-08-10 16:16:59 发布
最新推荐文章于 2023-08-10 16:16:59 发布
阅读量572 收藏 1
点赞数
文章标签： 前端 angular chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/procstu/article/details/123348368
版权

  • clientHeight
    clientHeight = content height + paddingTop + paddingBottom
    clientHeight并不会包含border和横向滚动条的高度
    对于行内元素，值为0

  • offsetHeight
    offsetHeight = content height + paddingTop + paddingBottom + borderTop + borderBottom + 横向滚动条高度
    offsetHeight不会包含margin
    对于行内元素，值为0

  • offsetTop
    从父级元素的顶部位置到该元素的当前顶部位置

  • scrollHeight
    若要滚动条，scrollHeight表示整个元素的高度，即不可见元素的高度。可见部分的高度为clientHeight

  • scrollTop
    滚动条向下滚动的距离

procstu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
01-19
全文参考：https://github.com/iuap-design/blog/issues/38 、MDN clientHeight，只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95 clientTop，只读 一个元素顶部边框的宽度（以像素表示）。嗯。。就只是border-top-width 类似的属性还有一
clientHeight
04-08
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
最新发布
趟过java，遇见web
08-10 1307
只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在） offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
ClientHeight
08-24 1151
window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.heig
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：...
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
09-25
top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight 等应用，大家可以参考下。
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
12-02
网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body....
Js中关于top、clientTop、scrollTop、offsetTop.pdf
09-27
七、clientHeight、offsetHeight 和 scrollHeight * clientHeight：内容可视区域的高度 * offsetHeight：对象自身的高度，包括边框的高度 * scrollHeight：网页正文全文的高度 不同浏览器对这三个属性的解释不同，...
分析clientHeight、offsetHeight、scrollHeight
03-16
NULL 博文链接：https://love2java.iteye.com/blog/403776
clientHeight offsetHeight scrollHeight clientWidth详解
07-21
clientHeight offsetHeight scrollHeight clientWidth详解
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 3825
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight
weixin_41604040的博客
12-02 690
【基本概念】clientHeight / offsetHeight / scrollHeight / window.screen.height / window.screen.availHeight测试结果讨论 参考博客： https://blog.csdn.net/qq_35430000/article/details/80277587 https://www.cnblogs.com/chuaWeb/p/html_css_1.html 以下测试和结论均基于Chrome浏览器 86.0.4240.198 (
前端学习笔记（21）之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
前端下午茶
08-19 751
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） st
详解clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
zag666的博客
10-27 893
clientHeight： 内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。包括padding但不包括border、水平滚动条、margin的元素的高度。 scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）。 IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scr...
浅谈JS各种宽高（clientHeight、scrollHeight、offsetHeight等）
骆小胖~
09-13 2万+
  一、宽高     （1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度     （2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度     （3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那
js中clientHeight,clientWidth,clientLeft,clientTop的使用【学习笔记】
m0_56132701的博客
01-06 658
element.clientLeft属性等于元素节点左边框的宽度，element.clientTop属性等于网页元素顶部边框的宽度，单位为像素。这两个属性都包括滚动条的宽度，但是不包括margin和padding值，不过几乎不会出现左侧和顶部滚动条的情况。element.clientHeight属性返回元素节点可见部分的高度，element.clientWidth属性返回元素节点可见部分的宽度。这两个属性包含元素的padding值，但是不包含元素的margin值、边框以及滚动条。
[DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
06-07
这些属性都与元素的尺寸相关。 - `offsetHeight`：元素在垂直方向上占据的空间大小，包括元素的高度、上下边框...需要注意的是，`clientHeight`和`scrollHeight`还会受到CSS样式的影响，比如`box-sizing`属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值