好长时间没有更新博客了。。。

把我最近积累的一点知识点放上博客，以后以备不需之要，也给大家整理一下。。

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

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

JS 获取浏览器窗口大小

 

常用:

JS 获取浏览器窗口大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}

详细:

关于获取各种浏览器可见窗口大小: 
<script> 
function getInfo() 
{ 
var s = ""; 
s = " 网页可见区域宽：" document.body.clientWidth; 
s = " 网页可见区域高：" document.body.clientHeight; 
s = " 网页可见区域宽：" document.body.offsetWidth " (包括边线和滚动条的宽)"; 
s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)"; 
s = " 网页正文全文宽：" document.body.scrollWidth; 
s = " 网页正文全文高：" document.body.scrollHeight; 
s = " 网页被卷去的高(ff)：" document.body.scrollTop; 
s = " 网页被卷去的高(ie)：" document.documentElement.scrollTop; 
s = " 网页被卷去的左：" document.body.scrollLeft; 
s = " 网页正文部分上：" window.screenTop; 
s = " 网页正文部分左：" window.screenLeft; 
s = " 屏幕分辨率的高：" window.screen.height; 
s = " 屏幕分辨率的宽：" window.screen.width; 
s = " 屏幕可用工作区高度：" window.screen.availHeight; 
s = " 屏幕可用工作区宽度：" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色"; 
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸"; 
//alert (s); 
} 
getInfo(); 
</script> 
在我本地测试当中： 
在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
即可获得，很简单，很方便。 
而在公司项目当中： 
Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
原来是W3C的标准在作怪啊 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
如果在页面中添加这行标记的话 在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高） 
而如果没有定义W3C的标准，则 
IE为： 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
Opera为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

 
 1 <!DOCTYPE html>

 2 <script src="jquery-1.8.3.min.js" type="text/javascript"></script>

 3 <html>

 4   <head>

 5     <title>aaa</title>

 6   </head>

 7   <body>

 8 <h1>aaaaaaaaaaaa</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>
 

JS、JQUERY 获取浏览器和屏幕各种高度宽度的更多相关文章

  1. Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）

    Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见    http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

随机推荐

  1. windows——celery

    celery 4.0版本以后放弃对Windows的支持 GITHUB_issues(https://github.com/celery/celery/issues/4178) 替代解决方案: 安装:p ...

  2. 【Java-算法】 十六进制转字节数组

    Java Code public class Convert{ public static void main(String args[]) { String sHex = "00 B6 0 ...

  3. 【Android-ListView控件】显示信息

    效果图 布局文件 layout - activity_main.xml 在主布局添加一个listview控件 <?xml version="1.0" encoding=&qu ...

  4. 2016 NEERC, Northern Subregional Contest G.Gangsters in Central City（LCA）

    G.Gangsters in Central City 题意:一棵树,节点1为根,是水源.水顺着边流至叶子.该树的每个叶子上有房子.有q个询问,一种为房子u被强盗入侵,另一种为强盗撤离房子u.对于每个 ...

  5. CodeForces 519D A and B and Interesting Substrings ——（奥义字符串）

    题意:给出26个字母每个字母的价值,问字符串中有多少个满足以下条件的子串: 1.子串的第一个和最后一个相同 2.子串除了头和尾的其他字符的价值加起来和尾0 这题普通方法应该是O(n^2),但是在1e5 ...

  6. Leetcode题目169.求众数（简单）

    题目描述: 给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入: [3,2,3] ...

  7. Ubuntu桌面版与服务器版的区别（转）

    Ubuntu桌面版vs服务器版 提到安装Linux,Ubuntu可谓是最受欢迎的.为了满足每个人的需求,出现了不少版本或风格的Ubuntu:其中两项便是桌面版与服务器版.只要发布版本号一致,这两者从核 ...

  8. nginx 实现高并发和高负载

    一.Nginx是如何实现高并发的 service nginx start之后,然后输入#ps -ef|grep nginx,会发现Nginx有一个master进程和若干个worker进程,这些work ...

  9. 状压dp，松鼠从起点出发，拿到所有坚果，然后返回起点，求最短时间。

    UVA10944 松鼠从起点出发,拿到所有坚果,然后返回起点,求最短时间. #include<iostream> #include<cstdio> #include<al ...

  10. 修改网卡缓存，解决Linux 网卡丢包严重问题

    Linux 网卡丢包严重 生产中有一台linux设备并发比较大,droped包比较多,尤其是在跑游戏数据包的时候,存在严重的丢包现象,怀疑网卡性能不足,在更换设备前想能不有通过软件方法解决,通过网上一 ...