搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop转载自:https://www.imooc.com/article/17571网页可见区域高:document.body.clientHeight网页正文全文高:document.body.scrollHeight网页可见区域高(包括边线的高):document.body.offsetHeight网页被卷去的高:document.body.scrollTop屏幕分辨率高:window.screen…

大家好,又见面了,我是你们的朋友全栈君。

网页可见区域高:document.body.clientHeight

网页正文全文高:document.body.scrollHeight
网页可见区域高(包括边线的高):document.body.offsetHeight
网页被卷去的高:document.body.scrollTop

屏幕分辨率高:window.screen.height

 

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:
clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:
clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
接下来讨论出现有滚动条时的情况:
当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:
scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163717.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 机器人视觉软件工程师_机器视觉工程师能干到多少岁

    机器人视觉软件工程师_机器视觉工程师能干到多少岁  大家好,本人是刚刚入职的视觉工程师,现在已经一年了,也给大家分享一下在这一段时间里,我做了什么,以及学到了什么。对了,虽然我只做了两个月的视觉工程师,但是我已经连续写了12年的日记了,我想把这个好习惯一直延续下去,也算是做个记录。可能没有人看,只做个人消遣吧!2020.9.15  先讲一下我的个人情况吧,大学是在湖南省湘潭市读的,在大四的时候遇到了一个好的老师,领我上了计算机视觉的末班车,为我拨开本来迷茫如雾的未来,在毕业后只身踏入计算机视觉漫漫长征路。其实坦白来讲,我是打算在毕业后做一名

  • android 浏览器 开发,Android 浏览器的开发实例分享

    android 浏览器 开发,Android 浏览器的开发实例分享本文主要讲解Android浏览器的开发实例,有三部分内容:启动Android默认浏览器、指定浏览器进行访问以及打开本地的html文件。一、启动Android默认浏览器Java代码Intentintent=newIntent();intent.setAction(“android.intent.action.VIEW”);Uricontent_url=Uri.parse(“http:/…

  • java简单酒店管理系统_javaweb酒店管理系统

    java简单酒店管理系统_javaweb酒店管理系统编写Java程序实现小型酒店管理系统。为某个酒店编写程序:酒店管理系统,模拟订房、退房、打印所有房间状态等功能。1、该系统的用户是:酒店前台。2、酒店使用一个二维数组来模拟。“Room[][]rooms;”3、酒店中的每一个房间应该是一个java对象:Room4、每一个房间Room应该有:房间编号、房间类型、房间是否空闲.5、系统应该对外提供的功能:可以预定房间:用户输入房间编号,订房。可以退房:用户输入房间编号,退房。可以查看所有房间的状态:用户输入某个指令应该可以查看所有房间状态。

  • 学Java还是Python?一张图告诉你!

    学Java还是Python?一张图告诉你!Java和Python一直都是两种很火很强大的编程语言,对于刚开始起步学习编程的同学来说,会迷惑且最经常问的问题是,我该学Java还是Python,是不是Python容易学,或是应该先学什么编程语言等等这样的问题。作为一名Java程序员,肯定会建议你先学Java,然后再学Python,但如果你问一个Python程序员,可能会得到一个完全相反的答案。与此同时,Python

  • pycharm2022.01.12激活码 linux_在线激活

    (pycharm2022.01.12激活码 linux)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~4KDD…

  • Pytest(11)allure报告「建议收藏」

    Pytest(11)allure报告「建议收藏」前言allure是一个report框架,支持java的Junit/testng等框架,当然也可以支持python的pytest框架,也可以集成到Jenkins上展示高大上的报告界面。mac环境:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号