页面和块高度在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

posted @ 2013-01-10 14:41  创想中国(羲闻)  阅读(1277)  评论(0编辑  收藏  举报