在做一些弹出层的时候，经常需要弹出层有各种居中效果，实现这类特效我们一般就就要用到JS或jQuery，其中就需要获取浏览器窗口或文档的宽度和高度，以此来计算弹出层位移的值。今天我们就来看下如何运用JS及jQuery获取浏览器窗口内各种尺寸。

首先，浏览器可视区域尺寸——不是浏览器窗口尺寸，也不是页面尺寸，可以理解成我们一眼能看到的文档面积大小。

JS方法：

1、简单来说，可以用window.innerWidth和window.innerHeight。但要注意，这个尺寸是包含滚动条大小的。如果可以忽略滚动条的影响，就可以直接使用这两个属性；如果无法忽略（比如弹出框需要最大化），那么应该用另外的办法。

2、标准方法：document.documentElement.clientWidth和document.documentElement.clientHeight，其实也可以用document.documentElement.offsetWidth和document.documentElement.offsetHeight。这两种方法的区别就是：前者不包含document.documentElement的边框；后者是包含的。然而我们一般是不会给document.documentElement设置边框的，所以这两种方法就是通用的了。

jQuery方法：

非常简单：$(window).width()和$(window).height()。

其次，浏览器整个文档的尺寸。

JS方法：

使用：document.documentElement.scrollWidth和document.documentElement.scrollHeight。我们也可以用document.body.scrollWidth和document.body.scrollHeight。这两者也是可以通用的，不过我们要知道区别：就是document.body.scrollWidth获取的body的宽度值，默认我们是不给body设置宽度的；如果是设值的话，那么document.body.scrollWidth获取的就是这个设置的值了。

jQuery方法：

$(document).width()和$(document).height()或$(document.body).width()和$(document.body).height()。这里两种方法的区别等同于上面JS两者的区别。

另外附上jQuery获取滚动条相关值的方法：
滚动条到顶部的距离——$(document).scrollTop()
滚动条到左边的距离——$(document).scrollLeft()