document.body.clientHeight兼容性问题

Posted 2020-10-05 fxf111

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

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的实际高度。