html 视口高度,JavaScript视口宽高、元素位置、滚动高度、尺寸属性

本章将全面学习JavaScript各种位置信息属性和方法。在我参考了大量文章之后，有的文章很全面但是缺乏直观的图片。有的文章有图片，但是描述信息较少。还有的虽然很详细，但总会漏掉一些属性。希望自己能写一篇文章，让自己更全面理解这些属性。因为很多效果都离不开JS各种位置信息的属性计算，只有理解和记住了这些属性，才能更好的使用，更好的实现比较复杂的效果。

这篇文章不再说明浏览器兼容问题，如果需要请参考最后的参考链接文章。

一、window视图位置属性

1.1、window对象获取视口(浏览器窗口)宽高

console.log(window.innerHeight) // 939

console.log(window.outerHeight) // 1050

console.log(window.innerWidth) // 809

console.log(window.outerWidth) // 1680

innerHeight、outerHeight

innerHeight、outerHeight、innerWidth、outerWidth

属性名

描述

备注

window.innerHeight

浏览器窗口高度，如果存在水平滚动条，则包括滚动条

只读属性，没有默认值，不支持的浏览器则是undefined

window.innerWidth

浏览器窗口宽度，如果存在垂直滚动条，则包括滚动条

只读属性，没有默认值，不支持的浏览器则是undefined

window.outerWidth

浏览器窗口整个宽度，包括侧边栏，窗口镶边和调正窗口大小的边框

只读属性，没有默认值，不支持的浏览器则是undefined

window.outerHeight

浏览器窗口整个高度，包括窗口标题、工具栏、状态栏等

只读属性，没有默认值，不支持的浏览器则是undefined

注意：IE8及以下版本不支持window.innerHeight和window.innerWidth等属性。

对于不支持window.innerHeight等属性的浏览器中，可以读取documentElement和body的高度。最佳方式为：

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

document.documentElement.clientHeight和document.body.clientHeight的区别

document.documentElem