JS兼容性获取宽高方法

最新推荐文章于 2021-12-20 15:29:10 发布

木木守护神

最新推荐文章于 2021-12-20 15:29:10 发布

阅读量1.1k

点赞数

分类专栏：前端开发文章标签： javascript兼容性获取宽高

本文链接：https://blog.csdn.net/sinat_19435069/article/details/45068695

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

兼容性获取浏览器宽高的代码

今天在做js代码的时候，需要获取一段宽高，结果因为浏览器可见区域、元素、窗口的宽高获取有所不同搞得很乱，而且不同浏览器表现有所不同（主要是IE），从网上找了一段代码参考，很好用。做完了把代码也贴上：

<script>
function getInfo()
{
    var s = "";
    s += " 网页可见区域宽："+ document.body.clientWidth;
    s += " 网页可见区域高："+ document.body.clientHeight;
    s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
    s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
    s += " 网页正文全文宽："+ document.body.scrollWidth;     （所滚动过的所有宽度，页面拉了有多宽这个值就有多大，下同理）
    s += " 网页正文全文高："+ document.body.scrollHeight;
    s += " 网页被卷去的高(ff)："+ document.body.scrollTop;     （页面所有的高度-本身的高度，也就是滚轮所滚动的区间大小）
    s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
    s += " 网页被卷去的左："+ document.body.scrollLeft;
    s += " 网页正文部分上："+ window.screenTop;
    s += " 网页正文部分左："+ window.screenLeft;
    s += " 屏幕分辨率的高："+ window.screen.height;
    s += " 屏幕分辨率的宽："+ window.screen.width;
    s += " 屏幕可用工作区高度："+ window.screen.availHeight;
    s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
    s += " 文档显示区高度："+window.innerHTML;     <span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">只读属性，文档显示区高度。</span><span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">不包括菜单栏、工具栏以及滚动条等的高度,本属性IE不支持可用window.body替代。</span><span style="font-family: Verdana, Arial, 宋体; line-height: 18px; background-color: rgb(249, 249, 249);">
</span>}
getInfo();
</script>
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。

在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 ==> 可见区域高度

注意：<span style="font-family: Arial, Helvetica, sans-serif;">要此上获取的属性值，需要在头部添加以下w3c标记，或html5头部                                                                                                                                                                                       </span><span style="font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif; line-height: 1.8em; color: rgb(102, 102, 102); background-color: rgb(247, 247, 247);"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-</span><span style="font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif; line-height: 1.8em; color: rgb(102, 102, 102); background-color: rgb(247, 247, 247);">transitional.dtd"></span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>
如不添加IE中获取codumentElement.clientWitdh将为0，FireFox中获取结果也将存在误差。不管怎样，把文档头部加上就对了。
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

本文相比原文删掉了opera浏览器部分，并进行了部分增删了一些代码和说明，opera我已经彻底不使用了。