js获取各种屏幕的宽度和高度

最新推荐文章于 2024-07-16 14:46:16 发布

依托偶尔宁

最新推荐文章于 2024-07-16 14:46:16 发布

阅读量1.3k

点赞数

分类专栏： javascript 前端文章标签： javascript

本文链接：https://blog.csdn.net/xy1580/article/details/103234334

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

1.Javascript

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

2.jQuery

$(document).ready(function(){
	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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS,Jquery获取各种屏幕的宽度和高度 </title>
	<meta charset="utf-8" />
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js" type="text/javascript"></script>
    <script>
    //Javascript:
        document.write("<br /><br />以下为Javascript实现：<br /><br />");

    //网页可见区域宽： document.body.clientWidth
        document.write("<br />document.body.clientWidth:" +document.body.clientWidth);
        //网页可见区域高： document.body.clientHeight
        document.write("<br />document.body.clientHeight:" + document.body.clientHeight);
        //网页可见区域宽： document.body.offsetWidth (包括边线的宽)
        document.write("<br />document.body.offsetWidth:" + document.body.offsetWidth);
        //网页可见区域高： document.body.offsetHeight (包括边线的高)
        document.write("<br />document.body.offsetHeight:" + document.body.offsetHeight);
        //网页正文全文宽： document.body.scrollWidth
        document.write("<br />document.body.scrollWidth:" + document.body.scrollWidth);
        //网页正文全文高： document.body.scrollHeight
        document.write("<br />document.body.scrollHeight:" + document.body.scrollHeight);
        //网页被卷去的高： document.body.scrollTop
        document.write("<br />document.body.scrollTop:" + document.body.scrollTop);
        //网页被卷去的左： document.body.scrollLeft
        document.write("<br />document.body.scrollLeft:" + document.body.scrollLeft);
        //网页正文部分上： window.screenTop
        document.write("<br />window.screenTop:" + window.screenTop);
        //网页正文部分左： window.screenLeft
        document.write("<br />window.screenLeft:" + window.screenLeft);
        //屏幕分辨率的高： window.screen.height
        document.write("<br />window.screen.height:" + window.screen.height);
        //屏幕分辨率的宽： window.screen.width
        document.write("<br />window.screen.width:" + window.screen.width);
        //屏幕可用工作区高度： window.screen.availHeight
        document.write("<br />window.screen.availHeight:" + window.screen.availHeight);
        //屏幕可用工作区宽度： window.screen.availWidth
        document.write("<br />window.screen.availWidth:" + window.screen.availWidth);


        document.write("<br /><br />以下为jquery实现：<br /><br />");
    //JQuery:

   // $(document).ready(function(){
        document.write("<br />$(window).height()： " + $(window).height()); //浏览器当前窗口可视区域高度
        document.write("<br />$(document).height()： " + $(document).height()); //浏览器当前窗口文档的高度
        document.write("<br />$(document.body).height()： " + $(document.body).height());//浏览器当前窗口文档body的高度
        document.write("<br />$(document.body).outerHeight(true)： " + $(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

        document.write("<br />$(window).width()： " + $(window).width()); //浏览器当前窗口可视区域宽度
        document.write("<br />$(document).width()： " + $(document).width());//浏览器当前窗口文档对象宽度
        document.write("<br />$(document.body).width()： " + $(document.body).width());//浏览器当前窗口文档body的宽度
        document.write("<br />$(document.body).outerWidth(true)： " + $(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
   // })
    </script>
</body>
</html>