js获取各种高度

监听浏览器窗口大小改

先来一个浏览器窗口大小改变的事件，用来查看浏览器窗口的大小被改变可以触发一些函数

window.onresize 浏览器窗口大小改变事件

 window.onresize = function () {

     console.log('浏览器窗口的大小被改变了');

     something.....

 }

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。

---

1. 网页全文的高度和宽度：常用

• 获取的是body中的 内容 的高度，不会受到body本身的高度影响
• 如果body给定了固定高度/宽度 ，获取的依然是body里面内容的高度

document.body.scrollHeight    //文档高度 body中内容的高度

$(document).height()

document.body.scrollWidth     //文档宽度 **body中内容的宽度**

$(document).width()

---

2. 获取屏幕的高度和宽度（屏幕分辨率）：

• 获取整个屏幕的高\宽度
• 这是一个固定值

window.screen.height    //屏幕高度

window.screen.width     //屏幕宽度

---

3. 获取屏幕可工作区域的高度和宽度（去掉状态栏）：

• 只去除了上面的状态栏，打开控制台不受影响
• 这是一个固定值，不受浏览器窗口大小而改变

    window.screen.availHeight = window.screen.height  -  浏览器上面状态栏的高度

image.png

window.screen.availHeight    //可视区域去除状态栏高度

window.screen.availWidth    //可视区域去除状态栏宽度（和上面的值一样）

---

4. 滚动条卷上去的高度和向右卷的宽度：

document.body.scrollTop

document.body.scrollLeft

---

5. 网页可见区域的高度和宽度

• 以下所有的高度都会受到 body高度 的影响，比如body可是区域变小，或者body设置了固定高度

• 是去除浏览器上面个状态栏和控制台高度剩下的可以显示网页内容的高度

（不加边线）：

document.body.clientHeight

document.body.clientWidth

网页可见区域的高度和宽度（加边线）：

document.body.offsetHeight

document.body.offsetWidth

window.innerHeight

window.innerWidth     //没有去除滚动条的宽度

document.documentElement.clientHeight

document.documentElement.clientWidth    //去除滚动条的宽度