js获取浏览器窗口属性

来源：互联网发布：数据运维服务编辑：程序博客网时间：2024/05/22 18:50

网页可见区域宽：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.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
div.style.top：相对于div所在的元件的顶部距离
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了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文档所在窗口的当前宽度。
浏览器大小调整事件

window.onresize=funName;//当

来自另一篇文章

小结js屏幕、浏览器、页面大小

快放假过年了，公司最近也不忙，都在打酱油，趁这几天闲下来的时间，整理巩固一下相关疑问点，一直以来，对于js获取网页上的各种窗口大小，一直没有非常明确的理解和记忆，很多时候都是度娘和谷哥来解决，这次花了两天时间，在五种浏览器下分别进行了测试调试（分别是：IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1），整理自己的理解。

本文地址：http://www.cnblogs.com/vnii/archive/2012/01/13/2320842.html

声明：一下结论均是在标准模式<!DOCTYPE HTML> 下的测试结果，且测试浏览器分别为Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1，以下为书写方便，分别描述为IE、Chrome、FireFox、Opera、Safari，不写版本号。

测试HTML

js代码以及对于说表示的值如下：

//－－－－－－页面内容宽度、高度－－－－－－－－    alert(document.body.scrollWidth);    //其中IE Firefox Opera：不识别绝对定位absolute的宽度，仅表示“非绝对定位”内容的宽度，且当浏览器可用宽度>“非绝对定位”内容宽度时候，表示的和offsetWidth相同，即＝浏览器可用宽度-body的margin值-滚动条宽度    //其中Chrome Safari：页面内所有内容的宽度，且当浏览器宽度>所有内容宽度时候，表示的宽度为＝浏览器可用宽度-滚动条宽度    alert(document.body.scrollHeight);    //IE Firefox Opera：不识别绝对定位absolute的容器高度，仅表示页面内“非绝对定位”内容的高度；    //Chrome Safari：页面内所有内容的高度，且当浏览器可用高度>所有内容高度时候，表示为浏览器高度//[Begin新增 2012.1.16 14:40]//此处结合上面的body.scrollXxx就可以给出 整个网页的大小=Max(document.body.scrollXxx,document.documentElement.scrollXxx)//－－－－－－网页文档对象宽度、高度－－－－－－－－    alert(document.documentElement.scrollWidth);    //IE Firefox Opera：页面内所有内容的宽度，且当浏览器宽度>所有内容宽度时候，表示的宽度为＝浏览器可用宽度-滚动条宽度    //Chrome Safari：不识别绝对定位absolute的宽度，仅表示“非绝对定位”内容的宽度，且当浏览器可用宽度>“非绝对定位”内容宽度时候，表示宽度＝浏览器可用宽度-滚动条宽度    alert(document.documentElement.scrollHeight);    //IE Firefox Opera：页面内所有内容的高度，且当浏览器可用高度>所有内容高度时候，表示为浏览器高度    //Chrome Safari：不识别绝对定位absolute的容器高度，仅表示页面内“非绝对定位”内容的高度；//[End新增]//－－－－－－页面内容宽度、高度－－－－－－－－    alert(document.body.offsetWidth);    //页面内容宽度=浏览器可用宽度-body的margin值-滚动条宽度，其中滚动条没有时表示0    alert(document.body.offsetHeight);    //页面内容高度，均不识别绝对定位absolute的容器高度，仅表示页面内“非绝对定位”内容的高度//－－－－－－浏览器内容可见区域大小－－－－－－－－    alert(document.documentElement.clientWidth);    //浏览器内容可见区域宽度-滚动条宽度    alert(document.documentElement.clientHeight);    //浏览器内容可见区域高度-滚动条宽度//－－－－－－滚动条偏离大小－－－－－－－－    alert(document.body.scrollTop);    //Chrome Firefox  Safari Opera支持，滚动条滚动的高度    alert(document.body.scrollLeft);    //Chrome Firefox  Safari Opera支持，滚动条滚动的左右位移    alert(document.documentElement.scrollTop);    //IE支持，滚动条滚动的高度    alert(document.documentElement.scrollLeft);    //IE支持，滚动条滚动的左右位移//－－－－－－浏览器可用区域大小－－－－－－－－    alert(window.innerWidth);    alert(window.innerHeight);    //ie:浏览器可用区域大小，滚动条无影响 [修正 2012.1.16 15:15](IE8 以及以前 都不支持，结果为undefined)    //Chrome Firefox  Safari Opera：浏览器可用区域大小，滚动条无影响//－－－－－－屏幕大小－－－－－－－－    alert(window.screen.availWidth);    alert(window.screen.availHeight);    //当前屏幕大小(可用区域),window.screen.height减去任务栏等所占的大小//－－－－－－屏幕大小－－－－－－－－    alert(window.screen.width);    alert(window.screen.height);    //当前屏幕大小(分辨率值)