scrollHeight, clientHeight, offsetHeight的区别

bingo 发布于2019-08-23 12:11 / 1701人阅读

摘要：浏览器窗口宽高一些注意点无论是否出现滚动条，这两个值都是不变的。要比较这三个属性的不同，有个前提条件，就是元素要出现滚动条。

浏览器窗口和网页文档

先明确浏览器窗口和网页文档的区别，拿下面这张图来说

右边那张图中，大红色方框框起来的是浏览器窗口，而网页文档就是左边这张图。先不用去管scrollHeight这些东西，后面再解释。
先明确浏览器窗口和网页文档是不同的！！不用去纠结它们什么时候高度相等，明白这两个代表的含义才是最重要的。

浏览器窗口

宽：window.innerWidth
高：window.innerHeight

一些注意点：

无论是否出现滚动条，这两个值都是不变的。

当调整浏览器大小时，这两个值会变。

简而言之：就是你可以看到的浏览器视窗的大小(不包括顶部的菜单栏)

有小伙伴会问了，那window.outerWidth是和outerHeight是什么呢，这两个就是包含菜单栏的，比如你可以在chrome里按下F12打开调试窗口，放在右侧，就可以发现innerWidth和outerWidth是不同的。

网页文档

宽：document.body.scrollWidth
高：document.body.scrollHeight

好了既然这里讲到scrollHeight了，那刚好把clientHeight和offsetHeight讲了。
要比较这三个属性的不同，有个前提条件，就是元素要出现滚动条。举个栗子就是：




    
    
    
    Document

如图所示，大家也可以拷贝代码自己看效果.

对于以上代码，分别获取:

对于这三个属性，还是拿这张图来说：

scrollHeight: 就是container内部的总高度
这里内部元素就是large_block，large_block所撑开的高度(2000 + 40（上下padding） + 40（上下margin）) = 2080px，然后加上自身container上下各10px的padding,因此一共是2100px

clientHeight: 就是container内部可见高度 + 自身padding。
内部可见高度为600 - 17(滚动条高度)
padding为上下各10，因此一共是600 - 17 + 20 = 603

offsetHeight: 也是container自己本身的可见高度 + 自身padding + 自身border + 滚动条
与clientHeight不同的就是要加上自身border以及滚动条的高度，因此是603 + 20 + 17 = 640

写在最后

有问题的话欢迎讨论~一起进步

云服务器 GPU云服务器 scrollHeight offsetHeight clientHeight 主机的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98067.html

Js中关于top、clientTop、scrollTop、offsetTop

摘要：由于为外层元素设置了，所以内层元素会向上卷。和全面支持，而和不支持除外。认为是网页内容高度，不过最小值是。认为和都是网页内容高度，只不过当网页内容高度小于等于时，的值是，而可以小于。认为是可视区域滚动条加边框。转载自http://www.cnblogs.com/seven_...网页可见区域宽： document.body.clientWidth;网页可见区域高： document....

xorpay 2019-08-20 12:01 评论0 收藏0
原生 JS 获取元素的尺寸和位置

摘要：如何获取元素的真实尺寸呢通过下，介绍。这个函数主要提供给我们元素和宽度在内的一系列值仍然不要妄想通过获得，加上原先的，就可以减去和的值获得元素的真实尺寸。关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。 showImg(https://segmentfault.com/img/bVG...

simon_chen 2019-08-22 10:47 评论0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...

Jokcy 2019-08-19 18:44 评论0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...

tolerious 2019-08-01 15:27 评论0 收藏0
从html,css,javascript三方面谈谈“浏览器兼容性”的问题

摘要：可以理解为，在屏幕上通过浏览器窗口所能看到网页内容的高度。都表示浏览器中网页内容的高度，但稍有区别。解决等浏览器不支持标签的问题高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这时候我们就会面临这个兼容性问题。 javaScript 在IE、FireFox、Netscape等不同的浏览器里，对于document.body的clientHeight、offsetHeig...

William_Sang 2019-08-02 11:37 评论0 收藏0