dom元素滚动条高度 js_JS中元素高度相关方法

按照获取范围整理：

1. content

$(node).height()

image

2. content+padding

$(node).innerHeight()

image

原生JS:

node.clientHeight只读属性，元素content+padding目前可视的部分，不包括滚动条。

node.scrollHeight只读属性，元素content+padding所有可滚动部分，不包括滚动条

window.innerHeight可以返回窗口可视区高度。

* clientHeight和scrollHeight的区别

从字面意思讲：clientHeight返回元素可视区的高度(不包括伪元素)，scrollHeight返回整个元素所有部分的大小(很神奇的包括伪元素！)。

当元素小于容器大小时，node.scrollHeight == node.clientHeight

image

image

3. content+padding+border

$(node).outerHeight()

image

原生JS

node.offsetHeight，只读属性，content+padding+元素水平滚动条。这个属性值会被四舍五入为整数值。

window.outerHeight可以返回整个窗口的高度，包括地址栏菜单栏状态栏等等一系列乱七八糟的东西(有什么使用场景希望大家给个补充～)。

注：window不是一般的DOM元素，比如它就没有clientHeight属性。

4. content+padding+border+margin

$(node).outerHeight(true)

(示意图同上)

特殊的：window、document

window和document都不是DOM元素，不能按普通的DOM元素调用API。

window：窗口

window本身只有两个高度：

window.innerHeight 可视区高度

window.outerHeight 窗口整体带菜单地址栏等等的高度

但是window还有一个元素，它也有两个height：

window.screen：用户屏幕信息

window.screen.height 用户屏幕高度(不换屏这个数值不变)

window.screen.availHeight 用户屏幕能使用的高度。

window.screen 就是媒体查询@media screen and (min-width: 700px){ // some css styles }里面的screen。

补充：在Mac上实验，Chrome浏览器在桌面时，window.screen.height === 900，window.outerHeight === window.screen.availHeight === 878。但是将浏览器全屏(单开桌面)时，window.screen.availHeight === 878，window.outerHeight === window.screen.height === 900。即窗口实际高度竟然超过了屏幕可用高度！

火狐浏览器的表现更好，window.screen.availHeight 会跟随全屏状态，即单开桌面时，window.outerHeight === window.screen.availHeight === window.screen.height === 900。

document：文档

document是指整个html文件。它并不是一个页面更不是一个DOM元素，所以document没有高度。

那么document到底是个什么位置呢？下面给出主要元素的相对关系：

document.documentElement => html

document.documentElement.childeNodes[1] => body

document.body => body

document.documentElement

上面说了document.documentElement就是html标签，DOM元素会有的属性，document.documentElement就会有，包括clientHeight，scrollHeight，offsetHeight。

一般的，window.innerHeight === document.documentElement.clientHeight