本章将全面学习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