JS中的各种宽高度定义及其应用 JS中的各种宽高度定义及其应用

最近觉得js中的各种宽度高度的很多，有点混乱，在这里做一个小小的总结。

理清window和document的区别
理清各种宽高度的细节区别以及一些小的应用
- window的宽高读
- document/Element下的宽高度。

文章图片
思维导图.png 整个窗口大小 innerHeight 和 outerHeight

innerHeight /innerWidth：是浏览器视口的大小，包括滚动条 outerHeight /outerHeight：是整个浏览器窗口的大小，包括窗口的标题工具栏和状态栏等。

文章图片
innerHeight和outerHeight的区别.png

从 Firefox 4 到 Firefox 24，该属性有 bug，而且某种情况下，会在页面加载前给出一个错误的值

clinetHeight和clientWidth

文章图片
image.png

当然不是所有的浏览器都支持window的innerHeight的，所以就有了这个属性。
先看下面的这段代码：
前面提到window下的document和其他的body都是有clientWidth的这个属性的，所以可以通过设置这个来实现window.innerHeight的属性。

document.documentElement.clientHeight document.body.clientHeight

documentElement是文档的根元素，也就是html了。所以这也是html的宽度。
而body则是documentElement下的子元素。

-documentElement.ClientHeight 不包括整个文档的滚动条，也不包括html元素的边框。 -body.clientHeight 不包括整个文档的滚动条，也不包括html元素的边框和body元素的边框和滚动条。

最佳实践为了兼容浏览器的问题，可以使用以下代码实现。
当然，下面获取的宽度高度还是有所区别的，区别就在于一些边框和滚动条的宽度和高度有没有获取进。

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

实际应用那么，问题来了。
如何用当前浏览器窗口的高度去实现页面中元素的高度的自适应。
现在有一个这样的应用场景。
一个页面中，有头部，内容块，还有固定的底部。中间的内容块根据不同浏览器窗口而自适应，撑满整个屏幕的高度。那么这个高度如何获取呢？

var totalHeight =window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight// 这是当前浏览器的高度 var height = totalHeight - 头部的高度 - 底部的高度。 // 这个就是中间的内容区域的高度 // 当然，我们可以封装成一个函数。 function setHeight () { var totalHeight =window.innerHeight ||document.documentElement.clientHeight|| document.body.clientHeight// 这是当前浏览器的高度 var height = totalHeight - 头部的高度 - 底部的高度。 // 这个就是中间的内容区域的高度 document.querySelectorAll('.container')[0].style.height = height } // 当然，当我们去调整浏览器大小宽高的时候，需要重新设置内容区域的宽高。可以监听window的resize事件 window.addEventListener('resize', (e) => { setHeight() })

offsetHeight和offsetWidth 包括元素的padding和border的值。

文章图片
image.png scrollHeight 和scrollWidth 可以获取滚动元素的宽度和高度
经常是要结合scrollTop和scrollWidth来使用的，可以获取某个元素被滚动到父元素的哪个位置，也可以监听到元素是否到达底部或者顶部。

文章图片
image.png scrollTop

文章图片
image.png 所以根据这一点，也可以判断当什么时候，元素滑动到了容器的底部。也就是当满足以下条件的时候。

element.scrollHeight - element.scrollTop === element.clientheight

如下图所示：
所以当页面滚动到底部的时候，就满足以下图所示的条件。
这个可以用于判断是否可以阅读完文档。
image.png

欢迎互相分享。最近感觉学习前端到了一个瓶颈期了，好像一直都没有什么进步。

【JS中的各种宽高度定义及其应用】参考链接：
http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop