scrollHeight, clientHeight, offsetHeight的区别

45次阅读

共计 1445 个字符,预计需要花费 4 分钟才能阅读完成。

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

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

无论是否出现滚动条,这两个值都是不变的。
当调整浏览器大小时,这两个值会变。

简而言之:就是你可以看到的浏览器视窗的大小 (不包括顶部的菜单栏)
有小伙伴会问了,那 window.outerWidth 是和 outerHeight 是什么呢,这两个就是包含菜单栏的,比如你可以在 chrome 里按下 F12 打开调试窗口,放在右侧,就可以发现 innerWidth 和 outerWidth 是不同的。
网页文档
宽:document.body.scrollWidth
高:document.body.scrollHeight
好了既然这里讲到 scrollHeight 了,那刚好把 clientHeight 和 offsetHeight 讲了。要比较这三个属性的不同,有个前提条件,就是元素要出现滚动条。举个栗子就是:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<style>
.container {
width: 600px;
height: 600px;
padding: 10px;
border: 10px solid lightgray;
overflow: auto; // 注意这个属性
}
.large_block {
width: 1000px;
height: 2000px;
background-color: lightblue;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”large_block”></div>
</div>
</body>
</html>
如图所示,大家也可以拷贝代码自己看效果.

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

对于这三个属性,还是拿这张图来说:

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
写在最后
有问题的话欢迎讨论~ 一起进步

正文完
 0