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

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/weixuechao/p/6435028.html

文章标签：

#javascript #ViewUI

本文详细介绍了在不同浏览器中使用JavaScript和JQuery获取网页的各种尺寸和位置信息的方法，包括网页可见区域、文档高度、宽度及滚动条位置等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE html>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<html>
  <head>
    <title>aaa</title>
  </head>
  <body>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaa</h1>
    <p>Welcome to aaa</p>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
  </body>
</html>

<script type="text/javascript">
alert(document.body.clientWidth);
alert(document.body.clientHeight);
alert(document.body.offsetWidth);
alert(document.body.offsetHeight);

alert(document.body.scrollWidth);
alert(document.body.scrollHeight);

alert(document.body.scrollTop);
alert(document.body.scrollLeft);
alert(window.screenTop);
alert(window.screenLeft);
alert(window.screen.height);
alert(window.screen.width);
alert(window.screen.availHeight);
alert(window.screen.availWidth);

//alert($(document).height()); 
//alert($(document).width());
</script>

获取浏览器显示区域的高度： $(window).height();

获取浏览器显示区域的宽度：$(window).width();

获取页面的文档高度：$(document).height();

获取页面的文档宽度：$(document).width();

获取滚动条到顶部的垂直高度：$(document).scrollTop();

获取滚动条到左边的垂直宽度：$(document).scrollLeft();

计算元素位置和偏移量：$(id).offset();

offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

offset(options, results);

ptions.relativeTo　　指定相对计

算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

options.scroll　　是否把