脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS 浏览器窗口大小

JS获取各种浏览器窗口大小的方法

 更新时间：2014年01月14日 08:58:48   作者：  
本篇文章主要是对JS 获取各种浏览器窗口大小的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

常用:
JS 获取浏览器窗口大小

复制代码 代码如下:

// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

详细:
关于获取各种浏览器可见窗口大小:
<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.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在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的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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高）
而如果没有定义W3C的标准，则

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高）

您可能感兴趣的文章:

相关文章

  • 通过 Dom 方法提高 innerHTML 性能

    通过 Dom 方法提高 innerHTML 性能

    此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。
    2008-03-03
  • JavaScript 位运算及实际应用实例

    JavaScript 位运算及实际应用实例

    这篇文章主要为大家介绍了JavaScript位运算及实际应用实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-08-08
  • js实现鼠标点击页面弹出自定义文字效果

    js实现鼠标点击页面弹出自定义文字效果

    这篇文章主要为大家详细介绍了js实现鼠标点击页面弹出自定义文字效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JavaScript 消息框效果【实现代码】

    JavaScript 消息框效果【实现代码】

    下面小编就为大家带来一篇JavaScript 消息框效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-04-04
  • js设置默认时间跨度过程详解

    js设置默认时间跨度过程详解

    这篇文章主要介绍了js设置默认时间跨度过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 轮播图组件js代码

    轮播图组件js代码

    这篇文章主要为大家介绍了轮播图组件JavaScript代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript使用localStorage判断设置值是否过期

    JavaScript使用localStorage判断设置值是否过期

    本文主要介绍了JavaScript使用localStorage判断设置值是否过期，通过设置过期时间，我们可以使用 setItemWithExpiration 函数将数据存储到 localStorage 中，并使用 getItemWithExpiration 函数获取数据并检查是否过期，感兴趣的可以了解一下
    2023-05-05
  • Javascript 链式作用域详细介绍

    Javascript 链式作用域详细介绍

    这篇文章主要介绍了Javascript 链式作用域详细介绍的相关资料,需要的朋友可以参考下
    2017-02-02
  • Js表格万条数据瞬间加载实现代码

    Js表格万条数据瞬间加载实现代码

    一条数据创建一行，如果数量大的时候，一次性要加载完数据的话，浏览器就会卡上半天，下面有个不错的方法，大家可以参考下
    2014-02-02
  • 如何判断Javascript对象是否存在的简单实例

    如何判断Javascript对象是否存在的简单实例

    下面小编就为大家带来一篇如何判断Javascript对象是否存在的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论