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