Javascript、Jquery获取浏览器和屏幕各种高度宽度

另外参见    http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html

Javascript:

IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body)，包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body)，包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽，包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高，包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

Jquery 【jquery貌似不能直接获取屏幕宽高】

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

 1 <!DOCTYPE html>
 2 <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
 3 <html>
 4   <head>
 5     <title>aaa</title>
 6   </head>
 7   <body>
 8 <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 9 aaaaaaaaaaaaaaaaaa</h1>
10     <p>Welcome to aaa</p>
11 <h1>aaa</h1>
12 <h1>aaa</h1>
13 <h1>aaa</h1>
14 <h1>aaa</h1>
15 <h1>aaa</h1>
16 <h1>aaa</h1>
17 <h1>aaa</h1>
18 <h1>aaa</h1>
19 <h1>aaa</h1>
20 <h1>aaa</h1>
21 <h1>aaa</h1>
22 <h1>aaa</h1>
23 <h1>aaa</h1>
24   </body>
25 </html>
26
27 <script type="text/javascript">
28 alert(document.body.clientWidth);
29 alert(document.body.clientHeight);
30 alert(document.body.offsetWidth);
31 alert(document.body.offsetHeight);
32
33 alert(document.body.scrollWidth);
34 alert(document.body.scrollHeight);
35
36 alert(document.body.scrollTop);
37 alert(document.body.scrollLeft);
38 alert(window.screenTop);
39 alert(window.screenLeft);
40 alert(window.screen.height);
41 alert(window.screen.width);
42 alert(window.screen.availHeight);
43 alert(window.screen.availWidth);
44
45 //alert($(document).height());
46 //alert($(document).width());
47 </script>

Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）的更多相关文章

  1. Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用

    <js篇> Javascript获取浏览器和屏幕各种高度宽度方法总结 document.body.clientWidth       //网页可见区域宽(body) document.bo ...

  2. Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  3. Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

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

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

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

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

  6. C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  7. Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度

    $(document).ready(function()         {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...

  8. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

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

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

随机推荐

  1. Hive和并行数据仓库的比较

    最近分析和比较了Hive和并行数据仓库的架构,本文记下一些体会. Hive是架构在Hadoop MapReduce Framework之上的开源数据分析系统. Hive具有如下特点: 1. 数据以HD ...

  2. bbs项目中对反向查询和分组查询的具体的应用

    我的数据库是按照下面的图片的方式设计的 然后看下model中代码 class User(models.Model): uid = models.AutoField(primary_key=True) ...

  3. jmeter简单压测设置

    参数化 随机参数 时间参数 顺序自增函数  文件读取  直接引用 响应断言 用来查看sessionid 关联 关联引用 jmeter操作数据库 安装连接程序包 ip 端口号 哪个数据库 可以执行多条s ...

  4. python脚本netifaces模块的调用

    # vim get_ip.py # -*- coding: utf- -*- #complete local network card IP #need install netifaces modem ...

  5. linux下Redis主从复制

    Redis的主从配置比起MySQL主从配置简单多了,而且Redis主从复制中一个主服务可以有多个从服务,一个从服务又可以有多个从服务. MySQL主从配置http://www.cnblogs.com/ ...

  6. PHP系统编程--PHP进程信号处理（转）

    原地址:https://www.cnblogs.com/linzhenjie/p/5485436.html PHP的pcntl扩展提供了信号处理的功能,利用它可以让PHP来接管信号的处理,在开发服务器 ...

  7. Html中Select的增删改查排序，和jQuery中的常用功能

    这里主要通过select引出常用的jquery 前台页面 <select class="form-control" id="commonSelect"&g ...

  8. 安装mysql时启动服务出错问题

    mysql安装最后一步 无法启动服务错误 博客分类: IDE问题解析     今天安装mysql程序时候,在安装到最后一步时候,在最后一步却发现无法启动服务,出现这样的提示“cannot create ...

  9. How to Solve Lonsdor K518ISE Abnormal Display by Factory Resetting

    Here’s the working solution to Lonsdor K518ISE Key Programmer abnormal display after upgrade. Proble ...

  10. web前端学习笔记：文本属性

    今天的web前端笔记主要讲述文本属性,希望能帮助到正在学习web前端开发的初学者们,废话不多说了,一起来看看文本属性的相关内容吧. 文本属性 文本缩进 将Web页面上的一个段落第一行缩进,这是一种最常 ...