JQuery 获取浏览器窗口的高度和宽度讲解

知道91 | 站长推荐 | 2014-03-06 | 阅读:4857

在我们使用JQuery开发的过程中我们有时会根据浏览器窗口的位置定位,下面就讲解一下获取浏览器窗口尺寸的一些方法。

浏览器可视区域尺寸,注意这里指的不是浏览器窗口尺寸,也不是页面尺寸,我们可以想象成是我们能看到的文档面积大小

  • 当前浏览器窗口中可视区域高度:$(window).height()
  • 当前浏览器窗口中可视区域宽度:$(window).width()

浏览器整个文档的尺寸

  • 当前文档的高度:$(document).height()
  • 当前文档的宽度:$(document).width()

浏览器时下窗口文档body

  • 窗口文档body的高度:$(document.body).height()
  • 窗口文档body的宽度:$(document.body).width()

窗口文档body的总高度、总宽度 (包括padding、border、margin)

  • 窗口文档body的总高度(包括padding、border、margin):$(document.body).outerHeight(true)
  • 窗口文档body的总宽度(包括padding、border、margin):$(document.body).outerWidth(true)

滚动条相关值获取

  • 滚动条到顶部的距离:$(document).scrollTop()
  • 滚动条到左边的距离:$(document).scrollLeft()