您的位置：首页 > Web前端 > JavaScript

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

2014-03-18 22:25 471 查看
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="宽度和高度" onclick="widthAndHeight()"/>
</body>
</html>


2、运行结果

（1）初始化



（2）点击后

网页可见区域宽：1309
网页可见区域高：26
网页正文全文宽：1325
网页正文全文高：577
网页可见区域宽(包括边线的宽)：1309
网页可见区域高(包括边线的宽)：26
屏幕分辨率的宽：1366
屏幕分辨率的高：768
屏幕可用工作区宽度：1366
屏幕可用工作区高度：728
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航