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

js获取页面高度,宽度关于获取各种浏览器可见窗口大小的一点点研究在我本地测试当中：在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。

而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊如果在页面中添加这行标记的话在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 ==> 0document.documentElement.clientHeight ==> 0FireFox为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）Opera为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）。

JS取各种尺寸的方法JS取浏览器和网页可见区高和宽：<SCRIPT LANGUAGE="JavaScript">var s = "网页可见区域宽："+ document.body.clientWidth;s += "\r\n网页可见区域高："+ document.body.clientHeight;s += "\r\n网页正文全文宽："+ document.body.scrollWidth;s += "\r\n网页正文全文高："+ document.body.scrollHeight;s += "\r\n网页正文部分上："+ window.screenTop;s += "\r\n网页正文部分左："+ window.screenLeft;s += "\r\n屏幕分辨率的高："+ window.screen.height;s += "\r\n屏幕分辨率的宽："+ window.screen.width;s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;alert(s);</SCRIPT>普通DOM子元素的宽高获取：document.getElementById("元素id名称").style.widthdocument.getElementById("元素id名称").style.height在表格及其元素的CSS宽高获取上的浏览器兼容问题：对TABLE进行border-collapse:collapse;设定，对TR和TD进行display:block;设定，这时再去获取任意元素的宽高，各浏览器都会是一致的。

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.clientWidthdocument.body.clientHeight即可获得，很简单，很⽅便。

javascript获取⽹页宽⾼⽅法汇总document.body.clientWidth - ⽹页可见区域宽document.body.clientHeight - ⽹页可见区域⾼document.body.offsetWidth - ⽹页可见区域宽，包括边线和滚动条的宽document.body.offsetHeight - ⽹页可见区域⾼，包括边线和滚动条的⾼[FF,chrom下是整个页⾯⾼，IE opera 下正常] document.body.scrollWidth - ⽹页总宽document.body.scrollHeight - ⽹页总⾼document.body.scrollTop - 有滚动条的时候，向下拖动滚动条，上⽅不显⽰的那部分⾼度document.body.scrollLeft - 同上window.innerHeight - 浏览器窗⼝的内部⾼度window.innerWidth - 浏览器窗⼝的内部宽度window.screenTop - ⽹页正⽂部分上[⽹页⽂档的最上⽅距离屏幕最上⽅的距离，但FF不⽀持，Chrom,IE,Opera表现都不同，慎⽤]window.screenLeft - ⽹页正⽂部分左[⽹页⽂档的最左⽅距离屏幕最左⽅的距离，但FF不⽀持，Chrom,IE,Opera表现都不同，慎⽤]window.screen.height - 屏幕分辨率的⾼度window.screen.width - 屏幕分辨率的宽度window.screen.availHeight - 可⽤⼯作区⾼度[整个屏幕但不包括下⽅任务栏]window.screen.availWidth - 可⽤⼯作区宽度[整个屏幕的宽度]window.screen.clorDepth - 屏幕⾊彩，常⽤的16,32位等window.screen.deviceXDPI - 屏幕像素/英⼨【IE⽀持，其它不⽀持】JavaScript 获取页⾯宽⾼的⽅法<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.clientWidthdocument.body.clientHeight即可获得，很简单，很⽅便。

标题：如何使用JavaScript获取浏览器窗口标识在Web开发中，有时候我们需要获取浏览器窗口的一些标识，比如窗口的宽度、高度，或者用户滚动的位置等。

在这篇文章中，我将会介绍几种使用JavaScript获取浏览器窗口标识的方法，希望对大家有所帮助。

一、获取浏览器窗口的宽度和高度在很多情况下，我们希望能够获取浏览器窗口的宽度和高度，以便在网页布局中进行相应的调整。

使用JavaScript可以很轻松地实现这一功能，下面是具体的代码：```javascript// 获取浏览器窗口的宽度var windowWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;// 获取浏览器窗口的高度var windowHeight = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;上面的代码中，我们首先尝试使用window.innerWidth和window.innerHeight来获取浏览器窗口的宽度和高度，如果这两个属性不被支持，我们就使用document.documentElement.clientWidth和document.documentElement.clientHeight，最后使用document.body.clientWidth和document.body.clientHeight。

这样一来，我们就可以兼容大多数浏览器，获取到准确的窗口宽度和高度。

二、监听浏览器窗口的变化有些时候，我们希望能够在浏览器窗口大小发生变化的时候做出相应的处理，比如重新布局页面或者加载不同尺寸的图片。

这时候，我们可以使用JavaScript来监听浏览器窗口resize事件，下面是具体的代码：```javascriptwindow.addEventListener('resize', function() {// 当浏览器窗口大小发生变化时，执行相应的操作console.log('Window size changed');});上面的代码中，我们使用addEventListener方法来监听窗口的resize 事件，当窗口大小发生变化时，就会执行相应的操作。

javascript获取⽹页各种⾼宽及位置的⽅法总结screen对象获取屏幕的⾼宽（分辨率）screen.width //屏幕的宽screen.height //屏幕的⾼screen.availWidth //屏幕可⽤宽度屏幕的像素⾼度减去系统部件⾼度之后的值screen.availHeight //屏幕可⽤⾼度屏幕的像素宽度减去系统部件宽度之后的值window对象获得窗⼝位置及⼤⼩window.screenTop //窗⼝顶部距屏幕顶部的距离window.screenLeft //窗⼝左侧距屏幕左侧的距离window.innerWidth //窗⼝中可视区域(viewpoint)的宽度alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366window.innerHeight //窗⼝中可视区域(viewpoint)的⾼度该值与浏览器是否显⽰菜单栏等因素有关alert(window.innerHeight); //chrome 643 ff 657 ie 673window.outerWidth //浏览器窗⼝本⾝的宽度(可视区域宽度+浏览器边框宽度)alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382//说明chrome在最⼤化时浏览器窗⼝没有边框宽度,⾮最⼤化时有8px边框//ff和ie上下左右有8px的边框宽度window.outerHeight //浏览器窗⼝本⾝的⾼度alert(window.outerHeight); //chrome 728 ff 744 ie 744element对象在介绍element对象各种⾼宽之前有必要解释⼀下盒模型默认盒模型 box-sizing:content-box;boxWidth = 2*margin + 2*border + 2*padding + widthboxHeight = 2*margin + 2*border + 2*padding + height当不出现滚动条时body{margin:0;}#demo{width:100px;height:100px;padding:10px;border:20px;margin:30px;background-color:red;}<div id="demo">123456789 123456789</div>clientWidth:在页⾯上返回内容的可视宽度（不包括边框，边距或滚动条）clientHeight:在页⾯上返回内容的可视⾼度（不包括边框，边距或滚动条）clientWidth = 2*padding + width - scrollbarWidthconsole.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0clientHeight = 2*padding + height - scrollbarHeightconsole.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0offsetWidth:返回元素的宽度包括边框和填充，但不包括边距offsetHeight:返回元素的⾼度包括边框和填充，但不包括边距offsetWidth = 2*border + 2*padding + widthconsole.log(document.getElementById('demo').offsetWidth) //160offsetHeight = 2*border + 2*padding + heightconsole.log(document.getElementById('demo').offsetHeight) //160offsetLeft: 获取对象相对于版⾯或由 offsetLeft属性指定的⽗坐标的计算左侧位置offsetTop: 获取对象相对于版⾯或由 offsetTop属性指定的⽗坐标的计算顶端位置console.log(document.getElementById('demo').offsetLeft) //30console.log(document.getElementById('demo').offsetTop) //30当出现滚动条时body{margin:0;padding:20px;width:1000px;height:500px;}<div id="demo">123456789123456789</div>scrollWidth: 返回元素的整个宽度（包括带滚动条的隐蔽的地⽅）scrollHeight: 返回整个元素的⾼度（包括带滚动条的隐蔽的地⽅）scrollWidth = 2*padding + widthconsole.log(document.body.scrollWidth) //1040scrollHeight = 2*padding + widthconsole.log(document.body.scrollHeight) //540scrollTop: 向下滑动滚动块时元素隐藏内容的⾼度。

js获取浏览器⾼度窗⼝⾼度元素尺⼨偏移属性的⽅法如下所⽰：screen.widthscreen.heightscreen.availHeight //获取去除状态栏后的屏幕⾼度screen.availWidth //获取去除状态栏后的屏幕⾼度⼀、通过浏览器获得屏幕的尺⼨⼆、获取浏览器窗⼝内容的尺⼨//⾼度window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight//宽度window.innerWidth || document.documentElement.clientWidth || document.body.clientWidht/ ** window.innerHeight FF/CH ⽀持，获取窗⼝尺⼨。

* document.documentElement.clientHeight IE/CH⽀持* document.body.client 通过body元素获取内容的尺⼨* /三、滚动条⽀持的差异性不进⾏任何滚动条更改的页⾯，Firefox/IE 默认认为HTML元素具有滚动条属性。

⽽body不具有。

但Chrome 则认为body是具有滚动条属性的。

因此兼容性的写法是：document.documentElement.scrollTop || document.body.scrollTop四、获取元素的尺⼨elemnt.offsetWidthelemnt.offsetHeight// 仅IE5不⽀持，放⼼使⽤吧说明图：* offsetWidth 可以获取元素的⾼度尺⼨，包括：width + padding[left,right] + border[left,right]* offsetHeight 可以获取元素的宽度尺⼨，包括：height + padding[top,bottom] + bottom[top,bottom]五、元素的偏移属性element.offsetTop //获取元素与其偏移参考⽗元素顶部的间隔距离element.offsetLeft //获取元素与其偏移参考⽗元素左边的间隔距离element.offsetParent //获取当前元素的参考⽗元素*offsetTop 可以获取元素距其上⼀级的偏移参考⽗元素顶部的距离。

js获取浏览器和屏幕的各种宽度⾼度⼀：⽹页可见区域宽⾼，不包括⼯具栏和滚动条（浏览器窗⼝可视区域⼤⼩）1.对于IE9+、chrome、firefox、Opera、Safari：window.innerHeight浏览器窗⼝的内部⾼度；window.innerWidth浏览器窗⼝的内部宽度；2.对于IE8.7.6.5:document.documentElement.clientHeight:表⽰HTML⽂档所在窗⼝的当前⾼度；document.documentElement.clientWidth:表⽰HTML⽂档所在窗⼝的当前宽度；或者，因为document对象的body属性对应HTML⽂档的<body>标签，所以也可表⽰为：document.body.clientHeight：表⽰HTML⽂档所在窗⼝的当前⾼度；document.body.clientWidth：表⽰HTML⽂档所在窗⼝的当前宽度；结论：document.body.clientWidth/Height：的宽⾼偏⼩，⾼甚⾄默认200；document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽⾼始终相等。

所以在不同浏览器都实⽤的的Javascripit⽅案：var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;⼆：⽹页正⽂全⽂宽⾼scrollWidth和scrollHeight获取⽹页内容⾼度和宽度1.针对IE.Opera：scrollHeight是⽹页内容实际⾼度，可以⼩于clientHeight;2.针对NS.firefox：scrollHeight是⽹页内容⾼度，不过最⼩值是clientHeight;也就是说⽹页内容实际⾼度⼩于clientHeight的时候，scrollHeight返回clientHeight；3.浏览器兼容代码：var w = document.documentElement.scrollWidth || document.body.scrollWidth;var h = document.documentElement.scrollHeight || document.body.scrollHeight;⼆：⽹页可见区域宽⾼，包括滚动条等边线（会随窗⼝的显⽰⼤⼩改变）1.值： offsetWidth = scrollWidth + 左右滚动条 +左右边框； offsetHeight = scrollHeight + 上下滚动条 + 上下边框；2.浏览器兼容代码：var w = document.documentElement.offsetWidth || document.body.offsetWidth ;var h = document.documentElement.offsetHeight || document.body.offsetHeight ;三：⽹页卷去的距离与偏移量1.scrollLeft:设置或获取位于给定对象左边界与窗⼝中⽬前可见内容的最左端之间的距离；2.scrollTop:设置或获取位于给定对象最顶端与窗⼝中⽬前可见内容的最左端之间的距离；3.offsetLeft:设置或获取位于给定对象相对于版⾯或由offsetParent属性指定的⽗坐标的计算左侧位置；4.offsetTop:设置或获取位于给定对象相对于版⾯或由offsetParent属性指定的⽗坐标的计算顶端位置；以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！。

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度网页可见区域宽：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.availWidthHTML精确定位: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 + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = 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－－－－－－－－－－－－－－－－－－－技术要点本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。