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

一、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的情况下）

1. window.innerWidth（打开窗口的内部宽度）与window.outerWidth（打开窗口的外部宽度）

   
   
   

   两者在此表示一样的值

2. 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 。若改写的话也是可以的改变的。

出处：https://www.jianshu.com/p/b28a4dcd1b8c