offsetheight和clientheight_scrollheight属性

offsetheight和clientheight_scrollheight属性介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多,看后感觉明白了,一细想似乎又不明白了。为了获取更权威的解答,查阅了MDN文档,希望能帮助后来人。为了加深理解,看后,最好做下后边的实验。clientheightclientheight,内容的可视区域,不包含border。clientheight=padding+height-横向滚动轴高度。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

介绍

网上介绍clientheight、offsetheight、scrollheight的帖子很多,看后感觉明白了,一细想似乎又不明白了。为了获取更权威的解答,查阅了MDN 文档,希望能帮助后来人。为了加深理解,看后,最好做下后边的实验。

clientheight

clientheight,内容的可视区域,不包含border。clientheight=padding+height-横向滚动轴高度。

The Element.clientHeight read-only property is zero for elements with
no CSS or inline layout boxes, otherwise it’s the inner height of an
element in pixels, including padding but not the horizontal scrollbar
height, border, or margin.
这里写图片描述

offsetheight

offsetheight,它包含padding、border、横向滚动轴高度。
offsetheight=padding+height+border+横向滚动轴高度

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.
Typically, an element’s offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar (if present, if rendered).
For the document body object, the measurement includes total linear content height instead of the element’s CSS height. Floated elements extending below other linear content are ignored.
这里写图片描述

scrollheight

scrollheight,可滚动高度,就是将滚动框拉直,不再滚动的高度,这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。

The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow.
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element’s padding, but not its border or margin.
这里写图片描述

试验

现在我们做试验,来验证上述公式。
我们定义了一个滚动div和非滚动div,这两个div高度、宽度、padding、margin、border都一样,区别就是横向滚动不一样,然后分别,打印出clientHeight、offsetHeight、scrollHeight 在线演示地址

#scrolldiv{ width:150px; height:150px; display:block; overflow-y:auto; padding:5px; border: solid red 2px; margin:30px; box-sizing: content-box; }

效果图
这里写图片描述

验证clientHeight

根据公式,clientHeight=height+padding-横向滚动轴高度,143=150+(5+5)-横向滚动轴高度,得出横向滚动轴高度是17。为了看一下横向滚动轴高度是否是17,看一下第二个没有滚动轴的div的clientHeight正好是160,160-143=17,所以,我们可以肯定横向滚动轴高度是17,并且公式是正确的。

这是我们反推出来的横向滚动轴高度是17,根据浏览器的渲染模型也能正向推算出clientHeight,如图
这里写图片描述

可见内容可视高度是133,padding是5,所以clientHeight=渲染后的高度+padding=133+(5+5)=143,也符合预期。

验证offsetHeight

根据公式,offsetheight=padding+height+border+横向滚动轴高度,得出(5+5)+133+(2+2)+17=164,跟显示出来的高度一样。

scrollHeight这里就不验证了。

这张是没有横向滚动轴的渲染图
这里写图片描述

结论

通过上述实验,我们能得出,实际的可视区域比设置的值要小,因为滚动轴占去一部分。在计算时,clientHeight会剔除滚动轴,而offsetHeight会包含滚动轴。记住这两个公式

clientHeight=height+padding-横向滚动轴高度
offsetheight=padding+height+border+横向滚动轴高度

通过做实验,彻底理解了clientHeight、offsetHeight,实践出真知呀!

注意

在做测试时,一定要将css样式放在javascript之前或者window加载完毕后执行js,否则解析结果跟预期不同。

参考

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

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

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

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

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

(0)
blank

相关推荐

  • java stack deque_java如何实现栈

    java stack deque_java如何实现栈Java中的栈Stack、Deque、ArrayDeque、LinkedList的区别Stack类那么为什么我们不选择Stack呐?(两个主要原因)那么我们应该使用ArrayDeque还是LinkedList呐?总结Stack类Java中Stack类底层是数组实现的线程安全的栈。先进后出,常用操作是push/pop/peek而Deque是更加适用的双端队列接口,其通过ArrayDeque/LinkedList初始化实现Deque<Integer>stack=newArrayDeq

  • lombok @Accessors用法「建议收藏」

    @Accessors翻译是存取器。通过该注解可以控制getter和setter方法的形式。fluent若为true,则getter和setter方法的方法名都是属性名,且setter方法返回当前对象。@Data@Accessors(fluent=true)classUser{ privateIntegerid; privateStringname; //…

  • python表情代码_Python实现表情包的代码实例[通俗易懂]

    python表情代码_Python实现表情包的代码实例[通俗易懂]本文主要介绍了使用Python进行简单图像处理的方法以及Python自动生产表情包的实例,具有很好的参考价值,下面跟着小编一起来看下吧作为一个数据分析师,应该信奉一句话——“一图胜千言”。不过这里要说的并不是数据可视化,而是一款全民向的产品形态——表情包!!!!表情包不仅仅是一种符号,更是一种文化——是促进社交乃至社会发展的动力之一,就像懒。我们坚持认为,一张优秀的表情包,应该是一幅艺术品,是那忽…

    2022年10月29日
  • 激活成功教程资料大全「建议收藏」

    激活成功教程资料大全「建议收藏」激活成功教程资料大全顶啊!!! DFCG官方论坛http://www.chinadfcg.com/龙族联盟论坛http://www.chinadforce.com/index.php中国狂热激活成功教程联盟-梦想家园社区http://www.5icrack.com/bbs/index.php风飘雪|加密与解密实战攻略|最酷激活成功教程教学,带你轻松进入激活成功教程的殿堂http://www.hx007.com/f

  • ider2021激活码(JetBrains全家桶)

    (ider2021激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlFDZIAAVGQ5-eyJsaWNlbnNlSW…

  • FileInputFormat

    FileInputFormat最顶级是InputFormat抽象类,该类定义了两个方法,方法getSplits是负责切分输入文件(们)的,把很多的输入文件(们)切分成很多的输入分片,切分规则就是在这里定义的,每个InputSpl

发表回复

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

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