JQuery获取浏览器窗口宽高,文档宽高

2010-01-20 08:59
<script type="text/javascript">
$(document).ready(function()        
         {
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
}
         )
</script>

js

<script language="javascript">
function screenInfo(){
    var  s = "";
   s += "rn网页可见区域宽:"+ document.body.clientWidth;
   s += "rn网页可见区域高:"+ document.body.clientHeight;
   s += "rn网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "rn网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
   s += "rn网页正文全文宽:"+ document.body.scrollWidth;
   s += "rn网页正文全文高:"+ document.body.scrollHeight;
   s += "rn网页被卷去的高:"+ document.body.scrollTop;
   s += "rn网页被卷去的左:"+ document.body.scrollLeft;
   s += "rn网页正文部分上:"+ window.screenTop;
   s += "rn网页正文部分左:"+ window.screenLeft;
   s += "rn屏幕分辨率的高:"+ window.screen.height;
   s += "rn屏幕分辨率的宽:"+ window.screen.width;
   s += "rn屏幕可用工作区高度:"+ window.screen.availHeight;
   s += "rn屏幕可用工作区宽度:"+ window.screen.availWidth;
   alert(s);
}
</script>

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

实例

//js获取当前窗口的宽度高度。获取窗口尺寸

WE.getWndSize = function() {

var w = 0, h = 0;

if (window.innerWidth && window.innerHeight) {

w = window.innerWidth;

h = window.innerHeight;

} else if (document.documentElement) {

w = document.documentElement.clientWidth;

h = document.documentElement.clientHeight;

} else if (document.body.clientWidth && document.body.clientHeight) {

w = document.body.clientWidth;

h = document.body.clientHeight;

}

return { width: w, height: h };

}

[转]js和jquery获取窗体高度的更多相关文章

  1. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  2. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  4. JS和Jquery获取和修改label的值的示例代码

    abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源:  <  JS和Jquery获取和修改label的值的示例代码  & ...

  5. js和jQuery获取各种屏幕或文档的高度和宽度

    1.jQuery获取文档或屏幕的高度 console.log($(window).height());//浏览器页面当前屏幕可见区域的高度 console.log($(document).height ...

  6. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  7. js,jquery 获取滚动条高度和位置, 元素距顶部距离

    一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height();  获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...

  8. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  9. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

随机推荐

  1. Android开发环境包下载地址

    Android SDK Android NDK Android Studio 官方下载地址   (网上转来的) 如果下载速度很慢或者无法下载,有三种解决方法 1.忍耐. 2.使用P2SP下载工具,比如 ...

  2. CentOS 下 zookeeper 安装

     搭建zookeeper需要几个条件 a. 配置Java环境  c. centos d. 下载 xshell5 (下载它只是为了更方便的使用linux)     一.新建一个myapp目录: 二.下载 ...

  3. (原创)用Microsoft Chart Controls(MSChart)实现曲线图,并支持拖动放大到秒

    Microsoft Chart Controls(简称MSChart)控件,给图形统计和报表图形显示提供了很好的解决办法,同时支持Web和WinForm两种方式. MSChart 在.NET 4.0自 ...

  4. django使用ajax传输数据

    HTML文件ajax get例子 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. jquery call cross-domain webapi owin self-host

    <!DOCTYPE HTML> <html LANG="cn"> <head> <meta name="viewport&quo ...

  6. Foxman, 基于微核架构的 Mock 解决方案

    本文来自 网易云社区 . Foxman ⇗ 是一个使用 Node.js 开发的命令行工具,定位是一个可扩展的 Mock Server,帮助前端开发者轻松.独立.高效地进行前端开发和完成后续的联调工作. ...

  7. 《Beginning Java 7》 - 3 - Equalty 判等

    == 用于判断是否为同一引用. 比如对于 String: System.out.println("abc" == "abc"); // Output: true ...

  8. Delphi编程中使用回车键不换行处理方法!!

    我以前遇到过Delphi编程中使用回车键不换行的问题,一直没有找到正确处理方法,以至于每次都重新安装Delphi,今天在XE8中再次遇到这样问题,万幸找到了正确的解决方法: 可能使用过程中不小心按了i ...

  9. Linux下的信号量

    首先,什么是信号量? 信号量的本质是一种数据操作锁,它本身不具有数据交换的功能,而是通过控制其他的通信资源(文件,外部设备)来实现进程间通信,它本身只是一种外部资源的标识.信号量在此过程中负责操作的互 ...

  10. [ActionScript 3.0] 正则表达式

    正则表达式: 正则表达式最早是由数学家Stephen Kleene在对自然语言的递增研究成果的基础上,于1956提出来的.具有完整语法的正则表达式,主要使用在字符串的格式的匹配方面上,后来也逐渐应用到 ...