原生js和jquery 获取文档高度

一.原生js获取页面和浏览器高度和宽度

1.获取浏览器的高度和高度

工具栏高/宽度：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

  window.outerHeight ：浏览器高度(包含了工具栏高度)。window.outerWidth ：浏览器宽度(包含了工具栏宽度)。

以获取浏览器的高度为例：
1) window.outerHeight

2) window.innerHeight

2.获取页面的高度和高度

1) body.clientWidth ,body.clientHeight ：

  body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度。 (由元素内容高度决定)body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度。 (由元素内容宽度决定)

先引申一个知识点document.documentElement和document.body的区别

document代表的是整个文档(对于一个网页来说包括整个网页结构)，document.documentElement是整个文档节点树的根节点，在网页中即html标签；
document.body是整个文档DOM节点树里的body节点，网页中即为body标签元素

body元素的高度和宽度是由元素内容决定的，例如body中有一个元素box，高度是300px，则body的高度也是300px，但是html标签的高度是由浏览器决定的。

<!--* @Descripttion:* @version:* @Author: fengyang* @Date: 2021-07-05 15:19:49* @LastEditors: fengyang* @LastEditTime: 2021-10-21 21:20:28
-->
<!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><style>* {margin: 0;padding: 0;}.box {height: 300px;background-color: pink;}</style></head><body><div class="box"></div><script>console.log(document.documentElement .clientWidth, 'document.documentElement.clientWidth');console.log(document.documentElement .clientHeight, 'document.documentElement.clientHeight');console.log(document.body.clientWidth, 'document.body.clientWidth');console.log(document.body.clientHeight, 'document.body.clientHeight');</script>
</body></html>

再引申一个知识点，window.innerHeight和document.documentElement.clientHeight区别

1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型
2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.clientHeight不包含横向滚动条

可以看到没有横向滚动条时两者是相等的

现在我们将上面代码中box的宽度改为120%，使之出现横向滚动条，再看看结果：
横向滚动条高度 = window.innerHeight - document.documentElement.clientHeight

<!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><style>* {margin: 0;padding: 0;}html,body{height: 100%;width: 100%;}.box{height: 100%;width: 120%;background-color: pink;}</style></head><body><div class="box"></div><script>console.log(document.documentElement .clientWidth, 'document.documentElement.clientWidth');console.log(document.documentElement .clientHeight, 'document.documentElement.clientHeight');console.log(window.innerHeight, 'window.innerHeight');console.log(window.innerWidth, 'window.innerWidth');</script>
</body></html>

二.jquery获取页面和浏览器高度和宽度

        $(document)：整个文档 $(document).height()等价于 document.documentElement.clientHeight$("body")：body === $(document.body) $("body").height() 等价于 (document.body.clientHeight$(window)：视口 等价于原生window.innerHeight  window.outerHeight注意当浏览器窗口大小改变时(如最大化或拉大窗口后) $(window).height() 而$(document).height()是不变的 (由元素高度固定)

<!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><script src="jquery.min.js"></script><style>* {margin: 0;padding: 0;}div {height: 300px;width: 120%;background-color: pink;}</style>
</head><body><div></div><script>console.log($(window).outerHeight(), 'window.outerHeight');console.log($(window).innerHeight(), 'window.innerHeight');console.log($(window).height(), 'window.height');console.log($(document).height(), 'document.height');console.log($(document.body).height(), 'document.body.height');console.log($("body").height(), 'body.height');</script></body>