JavaScript,Jquery 获取浏览器和屏幕高度宽度（摘自卡卡网）

最新推荐文章于 2024-07-25 09:24:40 发布

小白Alan

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量246

点赞数

分类专栏： JavaScript 文章标签： javascript jquery 页面宽度

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

Javascript:

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="http://www.webkaka.com/js/lib/jquery.js" type="text/javascript" ></script>
<html>
<head>
<title>Javascript、Jquery获取浏览器和屏幕各种高度宽度</title>
</head>
<body>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</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">
var str = "document.body.clientWidth="+document.body.clientWidth+"\n";
str = str + "document.body.clientHeight="+document.body.clientHeight+"\n";
str = str + "document.body.offsetWidth="+document.body.offsetWidth+"\n";
str = str + "document.body.offsetHeight="+document.body.offsetHeight+"\n";
str = str + "document.body.scrollWidth="+document.body.scrollWidth+"\n";
str = str + "document.body.scrollHeight="+document.body.scrollHeight+"\n";
str = str + "document.body.scrollTop="+document.body.scrollTop+"\n";
str = str + "document.body.scrollLeft="+document.body.scrollLeft+"\n";
str = str + "window.screenTop="+window.screenTop+"\n";
str = str + "window.screenLeft="+window.screenLeft+"\n";
str = str + "window.screen.height="+window.screen.height+"\n";
str = str + "window.screen.width="+window.screen.width+"\n";
str = str + "window.screen.availHeight="+window.screen.availHeight+"\n";
str = str + "window.screen.availWidth="+window.screen.availWidth;
alert(str);
</script>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript,Jquery 获取浏览器和屏幕高度宽度（摘自卡卡网）

Javascript、Jquery获取浏览器和屏幕各种高度宽度Javascript:alert(document.body.clientWidth); //网页可见区域宽(body)alert(document.body.clientHeight); //网页可见区域高(body)alert(document.body.offsetWidth); ...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。