document.body.clientHeight兼容性问题

  通常,我们获取浏览器可视窗口的宽高都是使用如下代码:

1 var h=document.documentElement.clientHeight||document.body.clientHeight;//获取浏览器窗口可视高度
2 var w=document.documentElement.clientWidth||document.body.clientWidth;//获取浏览器窗口可视宽度

  以获取浏览器可视窗口高度为例,如果document.documentElement.clientHeight不为0,则将document.documentElement.clientHeight的值赋给h,否则将document.body.clientHeight的值赋给h。此时,我陷入了疑惑之中,既然document.documentElement.clientHeight和document.body.clientHeight都是用来获取浏览器可视窗口的高度,那它们到底有什么区别?

  经过测试,在IE5中,document.documentElement.clientHeight返回值为0,document.body.clientHeight返回的当前浏览器可视窗口的高度。在Chrome、FireFox、IE7以上浏览器中,document.documentElement.clientHeight返回的是当前浏览器可视窗口的高度,而document.body.clientHeight返回的是body的实际高度。

时间: 2024-10-12 09:06:28

document.body.clientHeight兼容性问题的相关文章

document.documentElement.clientHeight 和 document.body.clientHeight

document.documentElement.clientHeight 和 document.body.clientHeight 介绍 在进行一些网页效果处理的时候,经常碰到document.documentElement.clientHeight和document.body.clientHeight. 百度随便一查,经常碰到有人将二者混为一谈. 但是二者之间还是有着很大区别的. document.documentElement.clientHeight 可以称为是获取的可视区域的高度,而d

[No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 注意开头<!DOCTYPE ..>的声明,没有该声明时,document.documentElement.clientHe

document.body.clientHeight的取值

http://www.cnblogs.com/fullhouse/archive/2012/01/05/2313800.html 有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果bo

window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight

说这几个属性前 我说一下我的设备 我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑 第一种:window.screen.height 这个方法是获取用户电脑屏幕的高度,是不关浏览器或者顶部工具栏跟底部工具栏的高度的 当我在高度为1080的我的显示屏屏幕上打印 window.screen.height 1080 当我在我的电脑上打印 window.screen.height 800 是的 ,这个属性就是电脑的高度 第二个属性:window.screen.availHeight 这

JavaScript基础 IE 7,8可用 获取网页的宽度与高度 document.documentElement.clientHeight

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确获取,代码没有问题: 解决方案:通过 cosole.log寻找错误点发现$(window).height()获取不正常并等于$(document).height():网上查找资料是由于没有正确的HTML5文档声明导致的 正确: <!DOCTYPE html> <html> <!-

document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中加了:<!DOCTYPE html> 很明显在谷歌浏览器中两个值不是一个概念. 页面中不加:<!DOCTYPE html> 发现两个的值掉了个个! 所以这里有几个问题要搞明白: 1.<!DOCTYPE html>是什么 <!DOCTYPE> 声明不是 HTML

document.documentElement.clientHeight||document.documentElement.scrollHeight

在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) “对于不包含滚动条的页面来说,scrollHeight和clientHeight之间的关系不明确.在基于document.docuemntElement查看模式下,各个浏览器表现出不一样的性质. 在FF下,这两组属性始终相等,是文档实际大小,非视口大小. 在Opera.safari.Chorme中,scrol

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

document.body.clientHeight:body对象的高度 document.documentElement.clientHeight:指可见区域的高度 获取元素中滚动条的垂直偏移可以写成: var top = document.documentElement.scrollTop || document.body.scrollTop; document.body.clientHeight和document.documentElement.clientHeight区别