JavaScript获取页面高度(多种浏览器)

在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 

定义标准
IE:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

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

Opera:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
 
未定义标准
IE:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取当前页面高度也有多种方法,其中一种方法是使用JavaScript的 `document` 对象的 `body` 或 `documentElement` 属性的 `scrollHeight` 或 `clientHeight` 属性来获取当前页面高度。具体步骤如下: 1. 在JavaScript代码中使用 `document.body.scrollHeight` 或 `document.documentElement.scrollHeight` 来获取当前页面高度: ```javascript const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); ``` 这里使用了 `Math.max` 函数来获取 `body` 和 `documentElement` 的 `scrollHeight` 属性中的最大值,因为有些浏览器中,`body` 和 `documentElement` 的 `scrollHeight` 属性可能不相等,而我们需要获取的是两者之间的最大值。 2. 如果需要获取当前可见部分的页面高度,可以使用 `document.body.clientHeight` 或 `document.documentElement.clientHeight` 来获取: ```javascript const visibleHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); ``` 这里同样使用了 `Math.max` 函数来获取 `body` 和 `documentElement` 的 `clientHeight` 属性中的最大值,因为有些浏览器中,`body` 和 `documentElement` 的 `clientHeight` 属性可能不相等,而我们需要获取的是两者之间的最大值。 另外,如果要实时获取页面高度,可以使用 `window` 对象的 `resize` 事件来监听窗口大小的变化,并在事件触发时重新计算页面高度。 例如: ```javascript window.addEventListener('resize', function() { const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); const visibleHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight); console.log('当前页面高度为:' + pageHeight); console.log('当前可见部分页面高度为:' + visibleHeight); }); ``` 这样在浏览器窗口大小改变时,就会自动更新页面高度并输出到控制台中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值