document.body.clientHeight 和 document.documentElement.clientHeight的区别

最新推荐文章于 2024-03-25 14:10:34 发布

原创最新推荐文章于 2024-03-25 14:10:34 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#firebug #javascript #测试

web前端专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了JavaScript中获取页面高度的不同方法，并解释了使用document.body.clientHeight与document.documentElement.clientHeight的区别，帮助开发者解决页面元素显示问题。

Javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别

这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0，所以菜单才显示不出来。

而取得bodyHeight 高度的语句是 var bodyHeight = document.documentElement.clientHeight;

于是在网上查找相关的资料，结合美工页面和程序的页面对比。

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度