js取得浏览器的宽高度并赋值给div
今天帮忙给3D组的同事做了一个div全屏的DEMO
方法一
<!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>div内容全屏</title> <style> * { margin:0; padding:0 } </style> </head> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <body> <div class="" style=" width:100%; background:#000; color:#FFF; text-align:center" id="mywrap">我是全屏</div> </body> <script language="JavaScript"> if(!Array.prototype.map) Array.prototype.map = function(fn,scope) { var result = [],ri = 0; for (var i = 0,n = this.length; i < n; i++){ if(i in this){ result[ri++] = fn.call(scope ,this[i],i,this); } } return result; }; var getWindowWH = function(){ return ["Height","Width"].map(function(name){ return window["inner"+name] || document.compatMode === "CSS1Compat" && document.documentElement[ "client" + name ] || document.body[ "client" + name ] }); } window.onload = function (){ if(!+"\v1" && !document.querySelector) { //IE6 IE7 document.body.onresize = resize; } else { window.onresize = resize; } function resize() { wSize(); return false;} } function wSize(){ var str=getWindowWH(); var strs= new Array(); strs=str.toString().split(","); //字符串分割 var h = strs[0] - 0; $('#mywrap').height(h); } wSize(); </script> </html>
方法二
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>请调整浏览器窗口</title> </head> <body> <h2 align="center">请调整浏览器窗口大小</h2><hr /> <form action="#" method="get" name="form1" id="form1"> <!--显示浏览器窗口的实际尺寸--> 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br /> 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /> </form> <script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测,获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){ winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //结果输出至两个文本框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //调用函数,获取数值 window.onresize=findDimensions; //--> </script> </body> </html>