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

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

参考链接：
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