JS中client/offset/scroll等的宽高解析

原文地址：→传送门

window相关宽高属性

1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度)

• window.outerHeight获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框。包含调试窗及浏览器边框
• window.outerWidth表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框。包含调试窗及浏览器边框
  

参考链接：
window.outerHeight -MDN
window.outerWidth-MDN

2. window.innerHeight (浏览器窗口的视口的高度)和 window.innerWidth

• window.innerHeight浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。不包含调试窗及浏览器边框
• window.innerWidth浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。不包含调试窗及浏览器边框

参考链接：
window.innerHeight - MDN
window.innerWidth - MDN

3. window.screen.width和window.screen.height

注：在获取值时可不加window.前缀

• window.screen.width声明了显示当前浏览器的屏幕的宽度，以像素计
• window.screen.height声明了显示当前浏览器的屏幕的高度，以像素计
  

参考链接：
window.screen - MDN
window.screen - MDN

4. window.screen.availHeight和window.screen.availWidth

• window.screen.availHeight声明了显示浏览器的屏幕的可用高度，以像素计。除去我们底部任务栏外的屏幕高度
• window.screen.availWidth声明了显示浏览器的屏幕的可用宽度，以像素计

参考链接：
window.screen - MDN
window.screen - MDN

5. window.screenTop和window.screenLeft

• 功能： 返回窗口的左上角在屏幕上的x坐标。该属性为只读属性。语法： window.screenLeft。注：在Firefox等浏览器中使用的是screenX属性。
• 返回窗口的左上角在屏幕上的y坐标。该属性为只读属性。 语法： window.screenTop。注：在Firefox等浏览器中使用的是screenY属性。
  

参考链接：
window.screenTop
window.screenLeft

document下面的相关属性（offset/client/scroll）

与client相关属性

6. document.body.clientWidth或element.clientWidth

• 表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。
• 该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。
• 语法：var intElemClientWidth = element.clientWidth;
  

参考链接：
Element.clientWidth - MDN

7. document.body.clientHeight或element.clientHeight

• 返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

参考链接：
element.clientHeight - MDN

8. document.body.clientLeft或element.clientLeft

• 表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。
  

参考链接：
Element.clientLeft - MDN

9. document.body.clientTop或element.clientTop

• 一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。

参考链接：
Element.clientTop

与offset相关属性

这一对属性指的是元素的border+padding+content的宽度和高度

10. document.body.offsetWidth或element.offsetWidth

• border/padding/width三者的总宽度
  

参考链接：
HTMLElement.offsetWidth

11. document.body.offsetHeight或element.offsetHeight

• border/padding/width三者的总高度，且是一个整数。

参考链接：
HTMLElement.offsetHeight

12. HTMLElement.offsetLeft和HTMLElement.offsetTop

这两个属性是基于offsetParent的

• 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body.
• 假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。
• offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
• offsetTop返回当前元素相对于其 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)+(当前元素的margin-left)+(offsetParent的padding-left)

参考链接：
HTMLElement.offsetLeft
HTMLElement.offsetTop

与scroll相关属性

13. document.body.scrollWidth及document.body.scrollHeight

body与普通element不一样

• 给定body宽高 < 浏览器窗口时：

scrollWidth = 浏览器窗口宽度
scrollHeight = 浏览器窗口高度

• 给定body宽高大于浏览器窗口，且内容小于给定body宽高时：

scrollWidth = 给定的宽度 + body所有padding + body所有margin + body所有border
scrollHeight = 给定的高度 + body所有padding + body所有margin + body所有border

• 给定body宽高大于浏览器窗口，且内容大于给定窗口时：

scrollWidth = 内容的宽度 + body所有padding + body所有margin + body所有border
scrollHeight = 内容的高度 + body所有padding + body所有margin + body所有border

参考链接：
Element.scrollWidth

14. element.scrollWidth和element.scrollHeight

• 当无滚动条时：

scrollWidth = clientWidth = 元素宽度 + padding和 
scrollHeight = clientHeight = 元素高度 + padding和

• 当有滚动条时：

scrollWidth = 实际内容的宽度 + padding和 
scrollHeight  = 实际内容的高度 + padding和

15. document.body.scrollTop及document.body.scrollLeft

• 这对属性是可读写（可被重新赋值） 的
• 指的是当元素其中的内容超出其宽高的时候，元素被卷起来的高和宽度。
• 对于element元素同样适用

16. window.scrollY及window.scrollX

• window.scrollY 文档从顶部开始滚动过的像素值 / window.scrollX 文档从左侧开始滚动的像素值。

event中的五种坐标

1. clientX及clientY：相对于浏览器（可视区左上角0,0）的坐标

2. screenX和screenY：相对于设备屏幕左上角（0,0）的坐标

3. offsetX和offsetY：相对于事件源左上角（0,0）的坐标

4. pageX和pageY：相对于整个网页左上角（0,0）的坐标

参考来源：

• 视频课程：JS/jQuery宽高的理解和应用
• 博客：JavaScript中的各种宽高属性