【HTML】- js宽高的理解

js中有涉及各种各样的宽和高，如window下、document下、event下的，在使用过程中容易混淆，做一下总结。

1.和window相关的宽高

window.innerWidth 内部宽

window.innerHeight 内部高

window.outWidth 外部宽

window.outHeight 外部高

window.innerWidth和window.innerHeight是浏览器可视区域的宽高

window.outWidth 和window.outHeight 是浏览器的总宽高，宽高包括滚动条

window.screen.height 屏幕高

window.screen.width 屏幕宽

2.和document相关的宽高

2.1 与client相关的宽高

获得可视区域的宽高：document.body.clientHeight || document.documentElement.clientHeight || window.innerHeight

2.1.1 clientWidth和clientHeight

document.body.clientWidth和document.body.clientHeight指的是可见区域的宽高，及content+padding。

如果无padding无滚动，即为元素设定的宽度和高度 clientWidth =  style.width；

如果有padding无滚动clientWidth =  style.width + style.padding*2;

如果有padding有滚动条，因为滚动条会遮盖元素的宽高 ，那么该属性就是其本身宽高减去滚动条的宽高 clientWidth = style.width +  style.padding*2 - 滚动轴宽度。

2.1.2 clientLeft和clientWidth

document.body.clientLeft document.body.clientTop 这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，值为0；clientLeft和 clientTop 是用来读取元素的border的宽高 clientTop = border-top的border-width。

2.2 与offset相关的宽高

2.2.1 offsetWidth和offsetHeight

document.body.offsetWidth document.body.offsetHeight
 这一属性指的是元素的border + padding + content的宽度和高度；该属性和其内部的显示内容是否超出元素大小无关，只和本身设定的border以及width和height有 关。

假如无padding无滚动无border offsetWidth = clientWidth = style.width;

假如有滚动条，有padding，有border offsetWidth = style.width +   style.padding*2 + (border-width)*2 = clientWidth + 滚动轴宽度 +
 (border-width)*2

假如有padding无滚动有border offsetWidth = style.width  +  style.padding*2 + (border-width)*2 = clientWidth + (border-width)*2

2.2.2 offsetLeft和offsetTop

document.body.offsetLeft document.body.offsetTop

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），  offsetParent为body

如果当前元素的父级元素中有CSS定位（position为absolute或relative），  offsetParent取最近的那个父元素

在IE6/7中：offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left)

在IE8/9/10中及Chrome中：offsetLeft = (offsetParent的margin-left) +

（offsetParent的border的宽度）+ （offsetParent的padding-left） + (当前元素  的margin-left)

在FireFox中：offsetLeft = (offsetParent的margin-left)  + (offsetParent的padding-left) + (当前元素的margin-left)

2.3 与scroll相关的宽高

2.3.1 scrollHeight和scrollWidth

body中：document.body.scrollWidth document.body.scrollHeight
 document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有点区别的。

当给定的宽高小于浏览器的窗口时，scrollWidth通常是浏览器的宽高，   scrollHeight通常是浏览器的高度。

当给定高大于浏览器的窗口时，且内容小于给定宽高时，scrollWidth给定的宽  + 其所有的padding、margin、和border，scrollHeight给定的高 + 其所有 的   padding、margin、和border

当给定宽高大于浏览器窗口，且内容大于给定宽高scrollWidth内容宽高时，其  scrollWidth = scrollWidth内容的宽 + 其所有的padding、margin、和border
 scrollHeight = scrollHeight内容的高 + 其所有 的  padding、margin、和border

div中：

在无滚动轴情况下 ：scrollWidth = clientWidth + style.padding*2

在有滚动轴情况下：scrollWidth = 是实际内容的宽度 + padding*2

2.3.2 scrollLeft和scrollTop

document.body.scrollLeft document.body.scrollTop
 这对属性是可读写的，指的是当元素其中的内容超出宽高的时候，元素被卷起的宽度 和高度。

3.和event相关的宽高

clientX和clientY 相对于浏览器(可视区域左上角0,0)的坐标

screenX和screenY 相对于设备屏幕左上角(0,0)的坐标

offsetX和offsetY 相对于事件源左上角(0,0)的坐标

pageX和pageY 相对于网页(0,0)左上角

X和Y 本是IE属性，相对于CSS动态定位的最内层包容元素