JavaScript获取屏幕和页面的宽度和高度

JavaScript 专栏收录该内容
243 篇文章 0 订阅

JavaScript获取屏幕和页面的宽度和高度


1、设计源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宽度和高度</title>
<script type="text/javascript">
    function widthAndHeight()
	{
		//网页可见区域宽
		var clientWidth = document.body.clientWidth;
		//网页可见区域高
		var clientHeight = document.body.clientHeight;
		//网页正文全文宽
		var scrollWidth = document.body.scrollWidth;
		//网页正文全文高
		var scrollHeight = document.body.scrollHeight;
		//网页可见区域宽(包括边线的宽)
		var offWidth = document.body.offsetWidth;
		//网页可见区域高(包括边线的宽)
		var offHeight = document.body.offsetHeight;
		//屏幕分辨率的宽
		var screenWidth = window.screen.width;
		//屏幕分辨率的高
		var screenHeight = window.screen.height;
		//屏幕可用工作区宽度
		var avaWidth = window.screen.availWidth;
		//屏幕可用工作区高度
		var avaHeight = window.screen.availHeight;
		
		document.writeln("网页可见区域宽:" + clientWidth + "<br>");
		document.writeln("网页可见区域高:" + clientHeight + "<br>");
		document.writeln("网页正文全文宽:" + scrollWidth + "<br>");
		document.writeln("网页正文全文高:" + scrollHeight + "<br>");
		document.writeln("网页可见区域宽(包括边线的宽):" + offWidth + "<br>");
		document.writeln("网页可见区域高(包括边线的宽):" + offHeight + "<br>");
		document.writeln("屏幕分辨率的宽:" + screenWidth + "<br>");
		document.writeln("屏幕分辨率的高:" + screenHeight + "<br>");
		document.writeln("屏幕可用工作区宽度:" + avaWidth + "<br>");
		document.writeln("屏幕可用工作区高度:" + avaHeight + "<br>");
		
	}
</script>
</head>

<body>
   <input type="button" id="btn" value="宽度和高度" οnclick="widthAndHeight()"/>
</body>
</html>

2、运行结果

(1)初始化

       

(2)点击后

网页可见区域宽:1309
网页可见区域高:26
网页正文全文宽:1325
网页正文全文高:577
网页可见区域宽(包括边线的宽):1309
网页可见区域高(包括边线的宽):26
屏幕分辨率的宽:1366
屏幕分辨率的高:768
屏幕可用工作区宽度:1366
屏幕可用工作区高度:728


  • 2
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值