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

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

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 获取浏览器窗口大小

// 获取窗口宽度

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 获取浏览器和屏幕各种高度宽度

JS 获取浏览器窗口大小

常用:

详细:

最新文章

热门文章