网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

－－－－－－－－－－－－－－－－－－－

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码 <!——————————文件名：30.3.htm——————————>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!–显示浏览器窗口的实际尺寸–>
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!–
var winWidth = 0;
   var winHeight = 0;
   function findDimensions() //函数：获取尺寸
   {
   //获取窗口宽度
   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;
   }
   //结果输出至两个文本框
   document.form1.availHeight.value= winHeight;
   document.form1.availWidth.value= winWidth;
   }
   findDimensions();
   //调用函数，获取数值
   window.onresize=findDimensions;
//–>
</script>
</body>
</html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

JS 获取浏览器和屏幕宽高信息的更多相关文章

  1. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  2. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  3. js获取精确的元素宽高（普通获取高度会有误差）

    当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.ge ...

  4. javascript 常用获取页面宽高信息 API

    在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...

  5. JS获取浏览器信息及屏幕分辨率

    因为vue有自己的生命周期,初始化数据的时候,可以在钩子函数created()函数里初始化数据,也可以在mounted()函数里获取,但是两者是不同的,获取浏览器和屏幕分辨率的时候,不能在create ...

  6. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  7. js获取浏览器类型和版本信息

    bro () { let broName = 'Runing' let strStart = 0 let strStop = 0 let temp = '' let userAgent = windo ...

  8. js获取浏览器信息及版本（兼容IE）

    获取浏览器信息方法有很多种,但是要是兼容ie旧版本就有点麻烦了,因为很多方法在旧版本ie是不支持的,所以ie我做了单独处理,但是目前还有小问题,就是想显示QQ浏览器,搜狗浏览器..这样的,这样还实现不 ...

  9. js get browser vertion (js获取浏览器信息版本)

    1问题:js get browser vertion (js获取浏览器信息版本) 2解决方案 Copy this script into your JavaScript files. It works ...

随机推荐

  1. Entity Framework学习笔记——错误汇总

    之前的小项目做完了,到了总结经验和更新学习笔记的时间了.开始正题之前先啰嗦一下,对之前的学习目标进行一个调整:“根据代码生成表”与“生成数据库脚本和变更脚本”合并为“Code First模式日常使用篇 ...

  2. 使用struts通配符报错

    报错截图如下: 主要原因是:对大小写敏感. struts.xml StudentAction.java jsp页面:(重点就是这里,锚里面需要特别注意,大小写应该与struts.xml里面的保持一致, ...

  3. jsp+tomcat+mysql+sevlet+javabean配置过程

    在配置jsp开发环境的过程中会碰到不少问题,感谢网上的许多前辈的经验总结,作者cl41的JSP连接Mysql数据库攻略和作者Saulzy的MySQL学习笔记等文章对我来说简直是雪中送碳,为了帮助象我一 ...

  4. performSelector和respondsToSelector用法

    一.performSelector调用和直接调用区别 下面两段代码都在主线程中运行,我们在看别人代码时会发现有时会直接调用,有时会利用performSelector调用,今天看到有人在问这个问题,我便 ...

  5. XP局域网内专用消息队列

    网上能找到DELPHI消息队列的方法,在XP下试了总是不成功,后来在2003上试就行了,对比发现消息队列属性->安全 2003中多了个用户ANONYMOUS_LOGON. 然后在XP下消息队列属 ...

  6. netstat命令

    netstat命令会罗列出当前所有的网络连接.连接统计以及路由表信息.默认情况下,netstat命令将罗列出本地计算机所有开启的端口情况,以及它所连接的外部计算机情况. 端口就像一所房子的房门一样.数 ...

  7. Mac升级到Yosemite后默认的php版本不支持imagetfftext函数问题解决

    Mac升级到yosemite后,php也自动升级,运行项目的时候发现后台验证码显示不出来.调试一下发现imagetfftext这个函数不存在,应该gd没有安装完全,因为Mac上的php实现系统自带的, ...

  8. Redis从基础命令到实战之列表类型(List)

    经过上一篇基于Redis散列类型的改造后,实战练习中的商品管理已经具备了增加.修改整体.修改部分属性和分页查询功能,但仍然不支持删除商品的功能.这是因为商品总数是以一个自增数字记录的,且关联了新商品k ...

  9. 318. Maximum Product of Word Lengths

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  10. kendoTreeView，需要注意的地方

    今天使用了下kendoUI中的TreeView控件,一开始的时候总是不成功, 总是会报 Uncaught TypeError: Cannot read property 'toLowerCase' o ...