Javascript获取窗口大小(宽度,高度)

Javascript获取窗口大小(宽度,高度)

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(window).resize(showSize);
	showSize();
});

function showSize(){
	var msg = "窗口可视区域高度$(window).height():"+$(window).height();
	msg +="<br/>窗口文档的高度$(document).height():"+ $(document).height();
	msg +="<br/>窗口文档body的高度$(document.body).height():"+ $(document.body).height();
	msg +="<br/>窗口文档body的总高度 包括border,padding,margin $(document.body).outerHeight(true):"+ $(document.body).outerHeight(true);
	msg +="<br/>window.innerHeight:"+ window.innerHeight;
	msg +="<br/>document.body.clientHeight:"+ document.body.clientHeight;
	msg +="<br/>document.documentElement.clientHeight:"+ document.documentElement.clientHeight;
	msg +="<br/>窗口可视区域宽度$(window).width():"+ $(window).width();
    msg +="<br/>窗口文档对于象宽度$(document).width():"+ $(document).width();
    msg +="<br/>窗口文档body的高度$(document.body).width():"+ $(document.body).width();
    msg +="<br/>窗口文档body的总宽度 包括border,padding,margin $(document.body).outerWidth(true):"+ $(document.body).outerWidth(true);
    msg +="<br/>window.innerWidth:"+ window.innerWidth;
    msg +="<br/>document.body.clientWidth:"+ document.body.clientWidth;
    msg +="<br/>document.documentElement.clientWidth:"+ document.documentElement.clientWidth;
	$("#msg").html(msg);
}
</script>
</head>
<body>
<div id="msg"></div>
</body>
</html>

输出:

窗口可视区域高度$(window).height():763
窗口文档的高度$(document).height():763
窗口文档body的高度$(document.body).height():296
窗口文档body的总高度 包括border,padding,margin $(document.body).outerHeight(true):312
window.innerHeight:763
document.body.clientHeight:763
document.documentElement.clientHeight:312
窗口可视区域宽度$(window).width():1920
窗口文档对于象宽度$(document).width():1920
窗口文档body的高度$(document.body).width():1904
窗口文档body的总宽度 包括border,padding,margin $(document.body).outerWidth(true):1920
window.innerWidth:1920
document.body.clientWidth:1920
document.documentElement.clientWidth:1920

猜你喜欢

转载自jerval.iteye.com/blog/2229166
今日推荐