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

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

苏南大叔: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视口windowclientHeight
不满一屏,没滚动条标准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()

clientHeightoffsetHeightscrollHeight

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

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

在标准模式下,无论是否出现滚动条,clientHeightoffsetHeightscrollHeight都恒定等于页面的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.heightwindow.screen.availHeight

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

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

window.screenTopwindow.screenLeft

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

相关文章

总结

放个链接给有缘人,如下:

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

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

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

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