Window和Document

JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Document的区别:

• Window对象表示浏览器中打开的窗口，window对象可以省略，比如window.alert()可以简写为alert()。
• Document对象是Window对象的一部分，那么window.document.body我们可以写成document.body。
• window对象的location属性引用的是location对象，表示该窗口中当前显示文档的URL，document的对象的location属性也是引用location对象，所以 window.location === document.location 。

Window下的宽高属性:

window.innerWidth:浏览器窗口内部宽度
window.innerHeight:浏览器窗口内部高度
window.outerWidth:浏览器窗口外部宽度
window.outerHeight:浏览器窗口外部高度

//以下属性为用户屏幕的相关信息
window.screen.width:屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:屏幕的可使用宽度
window.screen.availHeight:屏幕的可使用高度
window.screenTop:浏览器窗口距屏幕顶部的距离
window.screenLeft:浏览器窗口距屏幕左侧的距离

注意

innerWidth、innerHeight和outerWidth、outerHeight是不支持IE9以下版本的

参考图如下:

Document下的宽高属性

可通过 elem.属性 或 elem.方法 的方式使用

Docment下有三类属性:

• 与client相关的宽高
• 与offset相关的宽高
• 与scroll相关的宽高

与client相关的宽高:

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidth和clientHeight该属性指的是元素的可视部分宽度和高度，即padding+content

• 如果没有滚动条，即为元素设定的高度和宽度
• 如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

clientLeft和clientTop这两个指的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0

clientTop = border-top.border-width
clientLeft = border-left.border-width

获取浏览器窗口可视区域大小（兼容各浏览器）:

提示

document.body是DOM对象中的body子节点，就是使用'body'标签来定义的。

document.documentElement是整个DOM节点树的根节点，就是用'html'标签来定义的。

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

与offset相关宽高介绍

document.body.offsetWidth
document.body.offsetHeight
document.offsetLeft
document.offsetTop

• offsetWidth与offsetHeight这一对属性指的是元素的border + padding + content的宽度和高度。 该属性与其内部的内容是否超出元素无关，只与本来设定的border以及padding和content有关。
• offsetLeft和offsetTop这两个属性是基于offsetParent的。

提示

什么是offsetParent?

• 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body。
• 假如当前元素的父级元素中有CSS定位，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)

与scroll相关宽高介绍

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidth和scrollHeight:

• 给定宽高小于浏览器窗口: scrollWidth = 浏览器窗口的宽度

scrollHeight = 浏览器窗口的高度

• 给定宽高大于浏览器窗口，且内容小于给定宽高: scrollWidth = 给定的宽度 + 其所有padding、margin、border scrollHeight = 给定的高度 + 其所有的padding、margin、border

• 给定宽高大于浏览器窗口，且内容大于给定宽高: scrollWidth = 内容宽度 + 其所有的padding、margin、border scrollHeight = 内容高度 + 其所有的`padding、margin、border

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

Event对象的5种坐标

clientX和clientY，相对于浏览器（可视区左上角0,0）的坐标
screenX和screenY，相对于设备屏幕左上角（0,0）的坐标
offsetX和offsetY，相对于事件源左上角（0,0）的坐标
pageX和pageY，相对于整个网页左上角（0,0）的坐标
X和Y，本来是IE属性，相对于用CSS动态定位的最内层包容元素

JQuery下各种宽高

---

width():元素的content区域宽度
height():元素的content区域高度
innerWidth():元素的content+padding区域宽度
innerHeight():元素的content+padding区域高度
outerWidth(Boolean):可选，默认表示元素的content+padding+border区域的宽度，如果为true表示元素的content+padding+border+margin区域的宽度
outerHeight(Boolean):可选，默认表示元素的content+padding+border区域的高度，如果为true表示元素的content+padding+border+margin区域的高度
scrollLeft():相对于水平滚动条左边的距离
scrollTop():相对于垂直滚动条上边的距离
offset():返回相对于document的当前坐标值，包含left、top值
position():返回相对于offsetParent的当前坐标值，包含left、top值