浏览器和屏幕高度和宽度获取
程序员文章站
2022-03-10 17:14:44
...
Javascript、Jquery获取浏览器和屏幕各种高度宽度
- 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高）
Javascript 测试代码
//网页可见区域宽(body)
alert(document.body.clientWidth);
//网页可见区域高(body)
alert(document.body.clientHeight);
//网页可见区域宽(body)，包括border、margin等
alert(document.body.offsetWidth);
//网页可见区域宽(body)，包括border、margin等
alert(document.body.offsetHeight);
//网页正文全文宽，包括有滚动条时的未见区域
alert(document.body.scrollWidth);
//网页正文全文高，包括有滚动条时的未见区域
alert(document.body.scrollHeight);
//网页被卷去的Top(滚动条)
alert(document.body.scrollTop);
//网页被卷去的Left(滚动条)
alert(document.body.scrollLeft);
//浏览器距离Top
alert(window.screenTop);
//浏览器距离Left
alert(window.screenLeft);
//屏幕分辨率的高
alert(window.screen.height);
//屏幕分辨率的宽
alert(window.screen.width);
//屏幕可用工作区的高
alert(window.screen.availHeight);
//屏幕可用工作区的宽
alert(window.screen.availWidth);
Jquery测试代码
//浏览器当前窗口可视区域高度
alert($(window).height());
//浏览器当前窗口文档的高度
alert($(document).height());
//浏览器当前窗口文档body的高度
alert($(document.body).height());
//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(document.body).outerHeight(true));
//浏览器当前窗口可视区域宽度
alert($(window).width());
//浏览器当前窗口文档对象宽度
alert($(document).width());
//浏览器当前窗口文档body的宽度
alert($(document.body).width());
//浏览器当前窗口文档body的总宽度 包括border padding margin
alert($(document.body).outerWidth(true));
<! 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>