我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

经过前面几篇文章的内容，这里已经基本理解了尺寸包括client、offset、scroll几种。那么，本文描述的不再是页面元素，而是页面本身的尺寸，两者的相关尺寸的概念定义还是有较大区别的。另外，本文中的主要关注点在高度，而不是宽度。

苏南大叔：JavaScript如何获取各种页面宽度高度尺寸？ - 页面各种宽度高度尺寸
JavaScript如何获取各种页面宽度高度尺寸？（图4-1）

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。本文描述页面的各种整体尺寸的获取方式，测试环境：谷歌浏览器@111.0.5563.111。

重要前提

本文正确运行，正确得出结论的重要前提：确认页面模式。请确保页面模式是标准模式还是怪异模式，对于高度的测量也有很大区别。所以，如果高度测量的结果和预期值差别较大，请检查页面模式，请确保页面模式不是怪异模式。参考文章：

设置方式：

<!DOCTYPE html>

检测方式：

document.compatMode

document/document.body/window.screen

一共涉及到了以下这几个概念，

  • document，页面在一屏内的时候，document文档高度比body高度要高。
  • document.body或者body，指的是html代码中的body标签，其高度存在不满一屏的可能性，面积没有铺满一屏。
  • window视口，指的是浏览器的可以用于展示页面的那个区域的面积，不包括各种工具条，开发者工具之类的。
  • window.screen，这个区域指的是浏览器的尺寸。比如浏览器最大化的时候，就是屏幕的尺寸减去任务栏的面积。

一屏内和一屏外

一屏内和一屏外的时候，测量相关高度的时候有较大区别。

控制页面在一屏内或外，定义个小页面，然后通过调整浏览器的高度实现。
一屏内外页面模式文档document高页面内容body高视口window高屏幕screen高
不满一屏，没滚动条标准415（随视口变化）243（随代码固定）415（等于文档高）860（全屏）
不满一屏，没滚动条怪异415（随视口变化）399（几乎等于文档高）415（等于文档高）860（全屏）
出现滚动条标准275（随视口变化）243（随代码固定）150（小于文档高）860（全屏）
出现滚动条怪异259（随视口变化）243（几乎等于文档高）259（等于文档高,有问题）860（全屏）

怪异模式的页面果然怪异，出现滚动条的时候，视口高度的测量值明显有误，比真实的视口高度要高。
下面是两个截图，根据结果显示，document的高，就理解为html标签的高度即可。

苏南大叔：JavaScript如何获取各种页面宽度高度尺寸？ - 文档高度
JavaScript如何获取各种页面宽度高度尺寸？（图4-2）

苏南大叔：JavaScript如何获取各种页面宽度高度尺寸？ - body高
JavaScript如何获取各种页面宽度高度尺寸？（图4-3）

本节内容中涉及的计算代码为：

$(document).height()
$(document.body).height()
$(window).height()
window.screen.availHeight

body的高度

可视元素的左上角到可视元素的右下角的差。（可视元素的上方可能有空白的margin，在标准模式下，这不算body的高度）。比如第一个元素是p的时候，天然的margin。下图所示：

计算方式可以有：

$(document.body).height()
$("body").height()
$(body).height()
getComputedStyle(document.querySelector('body'), null).height

苏南大叔：JavaScript如何获取各种页面宽度高度尺寸？ - body高度
JavaScript如何获取各种页面宽度高度尺寸？（图4-4）

document.body.clientHeight和$(window).height()

client指的就是body，可能被隐藏了，也可能没有被隐藏（全部都显示了）。

但是，怪异模式下，视口高度的测试值总是等于文档高度的测试值的，这有些不科学，视口的解释有问题。

一屏内外页面模式文档document高页面内容body高视口window高clientHeight
不满一屏，没滚动条标准327（随视口变化）243（随代码固定）327（等于文档高）243（body高）
不满一屏，没滚动条怪异327（随视口变化）311（几乎等于文档高）327（等于文档高）327（文档高）
出现滚动条标准275（随视口变化）243（随代码固定）214（小于文档高）243（body高）
出现滚动条怪异259（随视口变化）243（几乎等于文档高）259（等于文档高）224（接近body高）

document.body.offsetHeight和$(document.body).outerHeight()

两者恒定相等，只不过

  • 怪异模式下，高度可变，但是都大于等于$(body).height()。
  • 标准模式下，高度固定，一直都等于$(body).height()。

clientHeight、offsetHeight、scrollHeight

对于body的各种尺寸指标的解释，可能要颠覆认知了，这里大家自己总结一下吧，实验结果和网上教程上的流行说明完全不同，欢迎留言。

一屏内外页面模式body高clientHeightoffsetHeightscrollHeight
不满一屏，没滚动条标准243243243243
不满一屏，没滚动条怪异367383367383
出现竖向滚动条标准243243243243
出现竖向滚动条怪异243206243259

在标准模式下，无论是否出现滚动条，clientHeight、offsetHeight、scrollHeight都恒定等于页面的height()，保持不变。
在怪异模式下，

  • 没滚动条的时候，offsetHeight=height() < clientHeight=scrollHeight。
  • 有滚动条的时候，clientHeight < offsetHeight=height() < scrollHeight。

所以，结论是标准模式下，所有的height一致。怪异模式下，client指的是露出来的可见部分。

测试代码：

$(document.body).height()
document.body.clientHeight
document.body.offsetHeight
document.body.scrollHeight
一屏内外页面模式body宽clientWidthoffsetWidthscrollWidth
不满一屏，没滚动条标准1424142414241424
不满一屏，没滚动条怪异1424144014241440
出现竖向滚动条标准1407140714071407
出现竖向滚动条怪异1407142314071423

测试代码：

$(document.body).width()
document.body.clientWidth
document.body.offsetWidth
document.body.scrollWidth

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>sunan大叔</p>
    <p>sunan大叔</p>
    <p>sunan大叔</p>
    <p>sunan大叔</p>
    <p>sunan大叔</p>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
    console.log($(document.body).width(),document.body.clientWidth,document.body.offsetWidth,document.body.scrollWidth);
    </script>
</body>
</html>

$(document).height()和$(document.body).outerHeight(true)

两者完全相等，标准模式下为固定值，怪异模式下，为可变值。

document.body.scrollHeight和$(document.body)[0].scrollHeight

标准模式下，两者恒定为body高度（243）。怪异模式下，随着视口的减小（出现滚动条），两者的取值逐步变小到恒定（259)。两种情况下的差值，可能来自于页面底部的空白。（html大于body的位置）。

document.body.scrollTop和$(document.body).scrollTop()

无论页面模式如何，无论是否出现滚动条，无论滚动条位置在哪里。这两个恒定为0。

window.screen.height和window.screen.availHeight

和页面无关，只是有关屏幕分辨率和任务栏的位置方位，这些都是恒定值。

  • window.screen.height>window.screen.availHeight（900,860）。差值应该是底部任务栏的尺寸。
  • window.screen.width=window.screen.availWidth（1440,1440）。默认情况下，无差值。

window.screenTop和window.screenLeft

这两个值居然是浏览器的左上角距离屏幕左上角的坐标，因为浏览器的界面可以出现在屏幕以外，所以这两个值还可以是负值。

相关文章

总结

放个链接给有缘人，如下：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   js