当前位置:首页 > 站长推荐 > JQuery 获取浏览器窗口的高度和宽度讲解

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

在我们使用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()
  • << WordPress 代码插件介绍
  • HTML+JS+CSS 实现Tab选项卡 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-get-browser-size/

    相关文章 近期热评 最新文章

    • JS&jQuery实现全球国家、州/省、城市select下拉框选择示例
      当我们填写用户地址的时候,需要填写用户的地址,对于全球的用户我们不能让用户任意输入地址,需要的是让用户选择地址,而不是填写。但是全球的国家众多,每个国家的州/...
    • HTML+JS+CSS 实现Tab选项卡
      在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍了使用jQuery UI和自定义实现HTML Tab 选项卡的两种方法。
    • JS/jQuery 实现Combobox可输可选下拉框(select)
      本文介绍了JS/jQuery 实现Combobox可输可选下拉框的方法,可以通过Ajax实现动态加载可输可选下拉框的选项,可以在下拉框中输入一个新值动态添加一个数据选项,同样可以...
    • jQuery 实现的多功能Tree/TreeView “树插件”— zTree
      zTree 是一个依靠 jQuery 实现的 Tree/TreeView 熟悉插件, zTree 最大优点是具有灵活的配置、优异的性能、多种功能的组合。本文详细介绍了通过zTree实现jQuery设置Tree...
    • HTML&jQuery横向循环左右滚动导航方法讲解
      HTML&jQuery横向循环左右滚动导航方法讲解,实现了基于jquery可配置循环左右滚动例子讲解,可以实现横向滚屏,左右移动,适合做滚动导航。
    • jQuery 国家语言(Language)选择切换讲解
      现在网站不仅是做的国内的,更多的大企业或者是做外贸电子商务的网站都需要面向国际化,因此就涉及到语言的选择,多语言网站建的切换应该怎么设计呢?这里给你一款jQuer...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。