js中的各种高度（宽度）

1. 屏幕分辨率是固定的物理高度。

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可工作区域的高：window.screen.availHeight

屏幕可工作区域的宽：window.screen.availWidth

2. 浏览器高度。

浏览器总高度：window.outerHeight （屏幕缩放会影响高度）

浏览器内页面可用高度：window.innerHeight （等于浏览器高度-顶部工具栏-底部滑动栏，若有调试面板还会再减去调度面板的高度，最后得出的才是可用高度）

3. document中的高度

clientHeight

offsetHeight

scrollHeight

offsetTop

scrollTop

每个HTML元素都具有这五个和元素高度、滚动和位置相关的属性

• clientHeight: 包括padding，不包括margin、border、和水平滚动条的高度

• offsetHeight: 包括padding，border和水平滚动条高度，不包括margin

clientHeight和offsetHeight代表元素的高度，和元素的滚动、位置没有关系！

• scrollHeight: 表示了所有区域的高度，包含了因为滚动被隐藏的部分。可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。

（当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll）

• scrollTop: 滚动条向下滚动的距离

• offsetTop: 它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离

（offsetParent: HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。）