javascript中的innerWidth、innerHeight、clientWidth、clientHeight、offsetWidth、offsetHeight等属性

Window 对象属性

属性	描述
innerWidth	返回窗口的文档显示区的宽度。（不包括浏览器控制台、菜单栏、工具栏）
innerHeight	返回窗口的文档显示区的高度。（不包括浏览器控制台、菜单栏、工具栏）

获取的是可视区的宽高

Document 对象属性

属性	描述
document.documentElement.clientWidth	浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
document.documentElement.clientHeight	浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
document.documentElement.offsetHeight	获取整个文档的高度（包含body的margin）
document.body.offsetHeight	获取整个文档的高度（不包含body的margin）
document.documentElement.scrollTop	返回文档的滚动top方向的距离（当窗口发生滚动时值改变）
document.documentElement.scrollLeft	返回文档的滚动left方向的距离（当窗口发生滚动时值改变）

元素对象

属性	描述
element.clientWidth	返回元素的可见宽度。水平方向 width + 左右padding
element.clientHeight	返回元素的可见高度。 垂直方向 height + 上下padding
element.offsetWidth	返回元素的宽度。水平方向 width + 左右padding + 左右border-width
element.offsetHeight	返回元素的高度。垂直方向 height + 上下padding + 上下border-width
element.offsetTop	返回元素的垂直偏移位置。获取当前元素到 定位父节点 的top方向的距离
element.offsetLeft	返回元素的水平偏移位置。获取当前元素到 定位父节点 的left方向的距离
element.offsetParent	返回元素的偏移容器。