中医药

作者：小菜更新时间：2025-03-16 点击数：

简介：此页面是否是列表页或首页？未找到合适正文内容。

【菜科解读】

此页面是否是列表页或首页？未找到合适正文内容。

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 Transitionalie浏览器（6）FF（2.0）Opera（9.25）ie浏览器（6）FF（2.0）Opera（9.25）window.innerHeight未定义807848未定义807848window.outerHeight未定义979911未定义979911window.screen.availHeight971971971971971971window.screen.height102410241024102410241024window.screenY未定义-4-23未定义-4-23window.scrollY未定义变化取决于从滚动未定义未定义变化取决于从滚动未定义window.pageYOffset未定义变化取决于从滚动变化取决于从滚动未定义变化取决于从滚动变化取决于从滚动document.body.clientHeight846807848319631243136document.body.scrollHeight325232023166319631243136document.body.scrollTop变化取决于从滚动变化取决于从滚动变化取决于从滚动000document.documentElement.scrollTop000变化取决于从滚动变化取决于从滚动变化取决于从滚动document.body.offsetHeight8503192848319631243136的document.getElementById（this_tbl）.clientHeight361371361361370361的document.getElementById（this_tbl）.scrollHeight361371361361370361的document.getElementById（this_tbl）.offsetHeight361371361361370361测试在您的浏览器（刷新页面点击下面refresh按钮就行测试）window.innerHeight916window.outerHeight1020window.screen.availHeight1020window.screen.height1050window.screenY0window.scrollY0window.pageYOffset0document.body.clientHeight975document.body.scrollHeight2412document.body.scrollTop0document.documentElement.scrollTop0document.body.offsetHeight975document.getElementById(tbl).clientHeight421document.getElementById(tbl).scrollHeight421document.getElementById(tbl).offsetHeight421注：表中的值取决于个人设置（工具栏，状态栏，字体大小等），所以他们可能会有所不同，即使你的浏览器版本是相同的。

结论DOCTYPE影响上述参数的值;在屏幕上确定高度时，你总是可以根据window.screen.height来确定;找到一个页面或块元素的可见部分的高度使用的document.getElementById.（id）.clientHeight，包括滚动部分的-的document.getElementById（ID）.scrollHeight。

JavaScript,中,页面,和,块,高度,的,属性,总结