一、用Jquery查看窗口可视区域宽度、高度的代码：
1、alert($(window).width());alert($(window).height());//浏览器当前窗口可视区域宽度、高度。
2、或alert($(window).innerWidth());alert($(window).innerHeight());//浏览器当前窗口可视区域宽度、高度。
3、或者
1 var wh = function(){ 2 var w = document.body.clientWidth; 3 alert("宽："+w) 4 } 5 wh();
//浏览器当前窗口可视区域宽度、高度。
4、或者
1 alert($(window).innerHeight()); 2 var wh = function(){ 3 var w = document.documentElement.clientWidth; 4 alert("宽："+w) 5 } 6 wh();
//浏览器当前窗口可视区域宽度、高度。
5、alert($(document).width());alert($(document).height());//浏览器当前窗口文档对象宽度、高度
6、alert($(document.body).width());alert($(document.body).height());//浏览器当前窗口文档body的宽度、高度
7、alert($(document.body).outerWidth(true));alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的宽度、总高度 包括border padding margin
二、实例：利用变量来改变div的宽高
1 <body> 2 <div id="wrap"></div> 3 <script> 4 $(function(){ 5 var w = $(window).width(); 6 $(document).mousemove(function(){ 7 $('#wrap').css("width","w+px").css('height','500px').css('background',"red") 8 }) 9 }) 10 </script> 11 </body>
实例：用js来获取浏览器视口的宽高
function getViewSize() { return { "w": window['innerWidth'] || document.documentElement.clientWidth, "h": window['innerHeight'] || document.documentElement.clientHeight } } function getFullSize() { var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) + Math.max(document.documentElement.scrollTop, document.body.scrollTop); w = Math.max(document.documentElement.scrollWidth, w); h = Math.max(document.documentElement.scrollHeight, h); return { "w": w, "h": h }; } function setContainerSize() { size = getViewSize(); console.log(size); document.getElementById("div").style.width = size["w"] - 100 + "px"; document.getElementById("div").style.height = size["h"] - 100 + "px"; } setContainerSize(); window.onresize = setContainerSize;
