Blog

JS及jQuery获取浏览器窗口内各种尺寸

在做一些弹出层的时候,经常需要弹出层有各种居中效果,实现这类特效我们一般就就要用到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()

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP