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. Json、JavaBean、String等互转

    Json.JavaBean.String等互转 本文介绍简单的Json.JavaBean.String互换(下文JavaBean简称Object对象,这里不是很严谨) 转换关系如下: 其中String ...

  2. xadmin系列之单实例模式

    先看下单实例的定义 python的模块实现单例模式是python语言特有的,python的模块天然就是单例的,因为python有个pyc文件,导入一次后,第二次导入直接从pyc中取数据了 这里我们主要 ...

  3. echarts横向柱状图如果想打开网址

    代码: var data = eval(data); var xList = new Array(); var yList = new Array(); var urlList = new Array ...

  4. Swift 小技巧 || 老偏方

    自己平时用的时候,或者看别人有一些好用的技巧分享一下,希望大家能get到 1.关于颜色 2.关于标记 // TODO:这样的标记XCode8才有的 // FIXME:这个也是XCode8有的

  5. php使用pthreads v3多线程的抓取新浪新闻信息

    我们使用pthreads,来写一个多线程的抓取页面小程序,把结果存到数据库里. 数据表结构如下: CREATE TABLE `tb_sina` ( `id` int(11) unsigned NOT ...

  6. django中的时区设置TIME_ZONE,USE_TZ

    Django如果开启了Time Zone功能,则所有的存储和内部处理,甚至包括直接print显示全都是UTC的.只有通过模板进行表单输入/渲染输出的时候,才会执行UTC本地时间的转换. 所以我建议后台 ...

  7. c#异步等待

    1:一直等待 2方法  现实等待 3:方法    带返回值得 begin -endinvoke 4: func 带返回值

  8. 4.Mysql中的运算符

    4.Mysql中的运算符运算符用来连接表达式.运算符包括:算术运算符.比较运算符.逻辑运算符.位运算符. 4.1 算术运算符算术运算符包括加(+).减(-).乘(*).除(/).取模(%,MOD) 5 ...

  9. andorid 列表视图之SimpleAdapter

    .xml <?xml version="1.0" encoding="utf-8"?> <ListView xmlns:android=&qu ...

  10. 【已处理完】Centos 6.5版本，df -h出来的容量与du -sh的容量不对应是怎么会事呢？

    问题如题,df -h 出来的容量与du -sh 查看的容量信息不一样,是那里出了问题了吗? 下面分别是du -sh *与df -h出来的结果 [root@mail /]# du -sh * 6.2M ...