浏览器和屏幕高度和宽度获取

最新推荐文章于 2023-10-11 17:37:50 发布

yueyuehe

最新推荐文章于 2023-10-11 17:37:50 发布

阅读量183

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yueyuehe/article/details/107837079

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>