获取浏览器窗口的可视区域高度和宽度

js中获取窗⼝⾼度的⽅法取窗⼝滚动条滚动⾼度function getScrollTop(){var scrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop;}else if(document.body){scrollTop=document.body.scrollTop;}return scrollTop;}取窗⼝可视范围的⾼度function getClientHeight(){var clientHeight=0;if(document.body.clientHeight&&document.documentElement.clientHeight){var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; }else{var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; }return clientHeight;}取⽂档内容实际⾼度function getScrollHeight(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);}////////////////////////////////////////////////////在IE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象⾼度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域⾼度document.documentElement.scrollTop =>窗⼝滚动条滚动⾼度在FireFox中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象⾼度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域⾼度document.documentElement.scrollTop =>窗⼝滚动条滚动⾼度在chrome中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象⾼度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域⾼度document.body.scrollTop =>窗⼝滚动条滚动⾼度在Opera中：document.body.clientWidth ==> 可见区域宽度document.body.clientHeight ==> 可见区域⾼度document.documentElement.clientWidth ==> 页⾯对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页⾯对象⾼度（即BODY对象⾼度加上Margin⾼滚动到顶部 window.scrollTo(0,0)滚动到尾部 window.scrollTo(0,document.body.clientHeight)js计算滚动条⾼度及窗⼝⾼度//页⾯位置及窗⼝⼤⼩function GetPageSize() {var scrW, scrH;if(window.innerHeight&& window.scrollMaxY){ // MozillascrW =window.innerWidth + window.scrollMaxX;scrH = window.innerHeight +window.scrollMaxY;}else if(document.body.scrollHeight >document.body.offsetHeight){ // all but IE MacscrW =document.body.scrollWidth;scrH = document.body.scrollHeight;} elseif(document.body){ // IE MacscrW = document.body.offsetWidth;scrH = document.body.offsetHeight;}var winW, winH;if(window.innerHeight){ // all except IEwinW =window.innerWidth;winH = window.innerHeight;} else if(document.documentElement &&document.documentElement.clientHeight){ // IE 6 Strict ModewinW =document.documentElement.clientWidth;winH =document.documentElement.clientHeight;} else if (document.body) { //otherwinW = document.body.clientWidth;winH =document.body.clientHeight;} // for small pages with total size lessthen the viewportvar pageW = (scrW<winW) ? winW : scrW;var pageH =(scrH<winH) ? winH : scrH;return {PageW:pageW, PageH:pageH,WinW:winW, WinH:winH};};//滚动条位置function GetPageScroll(){var x, y;if(window.pageYOffset){ // all except IEy =window.pageYOffset;x = window.pageXOffset;} elseif(document.documentElement && document.documentElement.scrollTop) { // IE 6 Stricty = document.documentElement.scrollTop;x= document.documentElement.scrollLeft;} else if(document.body) { // allother IEy = document.body.scrollTop;x =document.body.scrollLeft;}return {X:x,Y:y};}jQuery获取浏览器显⽰区域的⾼度：$(window).height();获取浏览器显⽰区域的宽度：$(window).width();获取页⾯的⽂档⾼度：$(document).height();获取页⾯的⽂档宽度：$(document).width();获取滚动条到顶部的垂直⾼度：$(document).scrollTop();获取滚动条到左边的垂直宽度：$(document).scrollLeft();计算元素位置和偏移量offset⽅法是⼀个很有⽤的⽅法，它返回包装集中第⼀个元素的偏移信息。

获取当前页面宽度的方法介绍在前端开发中，有时候我们需要获取当前页面的宽度，以便根据不同的宽度做出相应的布局和样式调整。

本文将介绍几种常用的方法来获取当前页面宽度，并对它们进行比较和分析。

方法一：使用JavaScript的window.innerWidth属性JavaScript提供了window.innerWidth属性来获取当前页面的宽度。

这个属性返回的是窗口的内部宽度，包括滚动条和边框的宽度。

var width = window.innerWidth;console.log(width);方法二：使用JavaScript的document.documentElement.clientWidth属性另一种获取当前页面宽度的方法是使用document.documentElement.clientWidth属性。

这个属性返回的是文档的根元素（html元素）的宽度。

var width = document.documentElement.clientWidth;console.log(width);方法三：使用jQuery的$(window).width()方法如果你正在使用jQuery，可以使用$(window).width()方法来获取当前页面的宽度。

这个方法返回的是窗口的宽度，不包括滚动条和边框的宽度。

var width = $(window).width();console.log(width);方法四：使用CSS的@media查询除了JavaScript，我们还可以使用CSS的@media查询来获取当前页面的宽度。

@media查询可以根据不同的媒体类型和条件来应用不同的样式。

我们可以在@media查询中使用min-width和max-width来判断当前页面的宽度。

@media screen and (min-width: 768px) and (max-width: 1024px) {/* 当页面宽度在768px和1024px之间时，应用这段样式 *//* 在这里可以添加一些具体的样式调整 */}方法比较和选择上面介绍了四种常用的方法来获取当前页面的宽度，它们各有优缺点。

获取当前页面高度的方法
在Web开发中，有时需要获取当前页面的高度。

这是因为在一些特定的场景下，例如需要动态设置页面元素的高度或者滚动到页面底部时加载更多内容，我们需要获取页面高度。

以下是获取当前页面高度的方法：
1. 使用document.documentElement.scrollHeight属性来获取页面高度。

这个属性返回整个文档的高度，包括滚动内容和不可见的内容。

2. 通过document.body.scrollHeight属性获取页面高度。

这个属性返回的是文档主体的高度，不包括滚动内容。

3. 使用window.innerHeight属性获取视口的高度。

这个值是浏览器窗口可见区域的高度，不包括滚动内容。

4. 使用document.documentElement.clientHeight属性获取视口的高度。

这个值与window.innerHeight属性相同。

以上是获取当前页面高度的几种方法，可以根据具体需求选择使用。

- 1 -。

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