页面和块高度在JavaScript中的属性总结
经常看到有人百度为什么cliengHeihgt获取的值为0，clientHeight与offsetHeight到底哪里不一样，为什么遇到这样问题的时候你总是感到迷惘呢，究其原因是对他们的属性不认识造成的，当我们创建HTML页面时候对于一个元素的宽度通常我们会指定他多大（以百分比或以像素为单位），但高度往往可以有所不同，这取决于你的内容。与块的高度相关联的常见问题是：向下滚动到特定的地方高度是多少；元素的绝对位置，;一个块相对于另一个块的高度等。在这种情况下CSS并不总是有帮助，特别是如果页面是动态的，这个时候使用javascript来获取他们的值是非常有帮助的
页面高度
设置窗口对象的高度的方法：
|
属性 |
描述 |
|---|---|
|
innerHeight（innerWidth） |
设置窗口的内容区域的高度 |
|
outerHeight（outerWidth） |
设置窗口高度 |
|
screen.availHeight（screen.availWidth） |
高度，以像素为单位的工作区屏幕大小（不含工具栏的高度） |
|
screen.height（screen.width） |
屏幕的高度（以像素为单位） |
|
screenY（screenX） |
从屏幕顶部到浏览器窗口的上边界的距离 |
|
scrollY（scrollX） |
文档垂直滚动的距离 |
|
pageYOffset（pageXOffset） |
页面的当前垂直位置相对于窗口角最上方左侧 |
请注意，第一并非所有的浏览器都支持，第二，并非所有的属性值一致。另外，不要忘 记，这些都是针对窗口对象中的所有属性，这意味着它们只适用于窗口对象，所以你不能这样写document.getElementById（ID）.innerHeight等 但是，在测试过程中（IE 6, FF 2.0, Opera 9.25)），结果发现，所有的浏览器只支持window.screen.availHeight和 window.screen.height（见下面汇总表）。但是，在大多数情况下，这是不够的，它往往是要知道块或容器的高度，所以你应该寻找其他方式
|
属性 |
描述 |
|---|---|
|
clientHeight（clientWidth） |
没有滚动条的高度 |
|
scrollHeight（scrollWidth） |
包括滚动条的高度 |
|
scrollTop（scrollLeft） |
当前位置相对于该块的上边界的垂直位移 |
|
offsetHeight（offsetWidth） |
对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 |
重要注意事项：这些属性需要在页面完全加载后才能使用，否则可能会有所不同，为什么呢？看下面的表...
汇总表
|
属性 |
没有定义DOCTYPE |
定义了！!DOCTYPE XHTML 1.0 Transitional | ||||
|---|---|---|---|---|---|---|
|
IE浏览器（6） |
FF（2.0） |
Opera（9.25） |
IE浏览器（6） |
FF（2.0） |
Opera（9.25） | |
|
window.innerHeight |
未定义 |
807 |
848 |
未定义 |
807 |
848 |
|
window.outerHeight |
未定义 |
979 |
911 |
未定义 |
979 |
911 |
|
window.screen.availHeight |
971 |
971 |
971 |
971 |
971 |
971 |
|
window.screen.height |
1024 |
1024 |
1024 |
1024 |
1024 |
1024 |
|
window.screenY |
未定义 |
-4 |
-23 |
未定义 |
-4 |
-23 |
|
window.scrollY |
未定义 |
变化取决于从滚动 |
未定义 |
未定义 |
变化取决于从滚动 |
未定义 |
|
window.pageYOffset |
未定义 |
变化取决于从滚动 |
变化取决于从滚动 |
未定义 |
变化取决于从滚动 |
变化取决于从滚动 |
|
document.body.clientHeight |
846 |
807 |
848 |
3196 |
3124 |
3136 |
|
document.body.scrollHeight |
3252 |
3202 |
3166 |
3196 |
3124 |
3136 |
|
document.body.scrollTop |
变化取决于从滚动 |
变化取决于从滚动 |
变化取决于从滚动 |
0 |
0 |
0 |
|
document.documentElement.scrollTop |
0 |
0 |
0 |
变化取决于从滚动 |
变化取决于从滚动 |
变化取决于从滚动 |
|
document.body.offsetHeight |
850 |
3192 |
848 |
3196 |
3124 |
3136 |
|
的document.getElementById（this_tbl）.clientHeight |
361 |
371 |
361 |
361 |
370 |
361 |
|
的document.getElementById（this_tbl）.scrollHeight |
361 |
371 |
361 |
361 |
370 |
361 |
|
的document.getElementById（this_tbl）.offsetHeight |
361 |
371 |
361 |
361 |
370 |
361 |
测试在您的浏览器（刷新页面点击下面refresh按钮就行测试）
| window.innerHeight | 700 | |
| window.outerHeight | 878 | |
| window.screen.availHeight | 870 | |
| window.screen.height | 900 | |
| window.screenY | -4 | |
| window.scrollY | 0 | |
| window.pageYOffset | 0 | |
| document.body.clientHeight | 145 | |
| document.body.scrollHeight | 145 | |
| document.body.scrollTop | 0 | |
| document.documentElement.scrollTop | 0 | |
| document.body.offsetHeight | 145 | |
| 的document.getElementById（TBL）。clientHeight | 347 | |
| 的document.getElementById（TBL）。scrollHeight | 347 | |
| 的document.getElementById（TBL）。offsetHeight | 347 |
注： 表中的值取决于个人设置（工具栏，状态栏，字体大小等），所以他们可能会有所不同，即使你的浏览器版本是相同的。
结论
- DOCTYPE影响上述参数的值;
- 在屏幕上确定高度时，你总是可以根据window.screen.height来确定;
- 找到一个页面或块元素的可见部分的高度使用的document.getElementById.（id）.clientHeight，包括滚动部分的- 的document.getElementById（ID）.scrollHeight。
hide
