理清window和document的区别以及两者的宽高

理清window和document的区别以及两者的宽高
转载https://www.jianshu.com/p/b28a4dcd1b8c
一、window和document的区别是什么？
window
1.window对象表示浏览器中打开的窗口。
2.window对象可以省略，如:
alert() 等价于 window.alert()
document
1.document对象是window对象的一部分。如：
document.body 等价于 window.document.body
2.浏览器的html文档成为document对象。
二、window.location和document.location一样吗？
window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL。
document对象的location属性也是引用了location对象。
因此
window.location === document.location //true
location.herf === window.location.href === document.location.href
三、与window相关的宽高（不考虑window.document的情况下）
window.innerWidth（打开窗口的内部宽度）与window.outerWidth（打开窗口的外部宽度）

两者在此表示一样的值
window.innerHeight（打开窗口的内部高度）与window.outerHeight（打开窗口的外部高度）

window的内高与外高

3.window.screen包含有关用户屏幕的信息

window.screen.height（整个屏幕的高。。固定值）
window.screen.width（整个屏幕的宽。。固定值）
window.screen.availHeight（可利用的高，即不包括浏览器Google属性栏。。固定值）
window.screen.availWidth（可利用的宽，与window.screen.width是一样的。。固定值）
window.screenTop（浏览器顶部距屏幕顶部的距离。。随浏览器的缩放以及位置决定）
window.screenLeft（浏览器左侧距屏幕左侧的距离。。随浏览器的缩放以及位置决定）
window.screen.height与window.screen.availHeight

四、与document相关的宽高（以document.body为例）

1. 与client相关的宽高
   document.body.clientWidth
   document.body.clientHeight
   document.body.clientTop
   document.body.clientLeft
   clientWidth与clientHeight
   1> 该属性指的是元素的可视部分宽度和高度，即padding + content。
   2> 如果没有滚动条，即为元素设定的高度和宽度。
   3> 如果出现滚动条，那么滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。（注意：mac系统下滚动轴不占宽度）
   总结：
   假如无padding无滚动：clientWidth = style.width
   假如有padding无滚动：clientWidth = style.width + style.padding＊２　
   假如有padding有滚动，并且滚动轴是显示的：clientWidth = style.width＋style.padding*2 - 滚动轴宽度

clientTop和clientLeft
这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0.
总结：
这一对属性是用来读取元素的border的宽度和高度的。
clientTop = border-top的border-width（边框像素）
clientLeft = border-left的border-widrh（边框像素）

2. 与offset相关的宽高
   document.body.offsetWidth
   document.body.offsetHeight
   document.body.offsetTop
   document.body.offsetLeft
   offsetWidth与offsetHeight
   1> 这一对属性指的是元素的border + padding + content的宽度和高度。
   2> 该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。
   总结：
   假如无padding 无滚动 无border：offsetWidth = clientWidth = style.width
   假如有padding 无滚动 有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth + (border-width)·2
   假如有padding 有滚动 有border：offsetWidth = style.width+style.padding·2 + (border-width)·2 或者 offsetWidth = clientWidth +滚动轴宽度 + (border-width)·2

offsetLeft与offsetTop

首先先要了解offsetParent这个属性：
1> 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2> 如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

这两个属性对于浏览器的兼容问题：
兼容性

对照上面的公式，下面的例子可帮助深入理解：

3. 与scroll相关的宽高
   document.body.scrollWidth
   document.body.scrollHeight
   document.body.scrollTop
   document.body.scrolleft
   scrollWidth 与 scrollHeight
   注意：document.body的scrollWidth和scrollHeight 与 div中scrollWidth和scrollHeight是有点区别的。
   <1> document.body的scrollWidth和scrollHeight

给定宽高小于浏览器窗口
1.scrollWidth通常是浏览器窗口的宽度
2.scrollHeight通常是浏览器窗口的高度
给定宽高大于浏览器窗口，且内容小于给定宽高（有border需乘2）
1.scrollWidth：给定的宽度 + 其所有的padding、margin和border
2.scrollHeight：给定的高度 +其所有的padding、margin和border
给定宽高大于浏览器窗口，且内容大于给定宽高（给定宽高有border不需乘2）
1.scrollWidth：内容宽度 + 其所有的padding、margin和border
2.scrollHeight：内容高度 + 其所有的padding、margin和border
<2> div的scrollWidth和scrollHeight

无滚动轴的情况
scrollWidth = clientWidth = style.width + style.padding · 2
有滚动轴时
scrollWidth = 实际内容的宽度 + padding · 2
scrollHeight = 实际内容的高度 + padding · 2
scrollLeft 和 scrollTop（以div为例）
这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的宽度和高度。默认都为0 。若改写的话也是可以的改变的。