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()

facebooktwittergoogle_pluslinkedinmail

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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