你的位置:首页 > Java教程

[Java教程]JavaScript获取浏览器高度和宽度值


IE中: 

document.body.clientWidth ==> *DY对象宽度

document.body.clientHeight ==> *DY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

FireFox中: 

document.body.clientWidth ==> *DY对象宽度

document.body.clientHeight ==> *DY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

Opera中: 

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度(即*DY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即*DY对象高度加上Margin高)

 

没有定义W3C的标准,则

IE为: 

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:

document.documentElement.clientWidth ==> 页面对象宽度(即*DY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即*DY对象高度加上Margin高)

Opera为: 

document.documentElement.clientWidth ==> 页面对象宽度(即*DY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即*DY对象高度加上Margin高)

 

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

 

HTML精确定位:scrollLeft、scrollWidth、clientWidth、offsetWidth

scrollWidth ==> 获取对象的滚动宽度

scrollHeight ==>  获取对象的滚动高度

scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(被卷去的左

scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离(被卷去的高

offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

event.clientX ==> 相对文档的水平座标

event.clientY ==> 相对文档的垂直座标

event.offsetX ==> 相对容器的水平坐标

event.offsetY ==> 相对容器的垂直坐标

document.documentElement.scrollTop ==> 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量

 

实现代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html "http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
  6. </meta></head> 
  7. <body> 
  8. <h2 align="center">请调整浏览器窗口大小</h2><hr /> 
  9. <form action="#" method="get" name="form1" id="form1"> 
  10. <!--显示浏览器窗口的实际尺寸--> 
  11. 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br /> 
  12. 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /> 
  13. </form> 
  14. <script type="text/javascript"> 
  15. <!--  
  16. var winWidth = 0;  
  17. var winHeight = 0;  
  18.  
  19. //函数:获取尺寸  
  20. function findDimensions() {  
  21.  
  22.     //获取窗口宽度  
  23.     if (window.innerWidth) {  
  24.         winWidth = window.innerWidth;  
  25.     } else if ((document.body) && (document.body.clientWidth)) {  
  26.         winWidth = document.body.clientWidth;  
  27.     }  
  28.  
  29.     //获取窗口高度  
  30.     if (window.innerHeight) {  
  31.         winHeight = window.innerHeight;  
  32.     } else if ((document.body) && (document.body.clientHeight)) {  
  33.         winHeight = document.body.clientHeight;  
  34.     }  
  35.  
  36.     //通过深入Document内部对body进行检测,获取窗口大小  
  37.     if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {  
  38.         winHeight = document.documentElement.clientHeight;  
  39.         winWidth = document.documentElement.clientWidth;  
  40.     }  
  41.  
  42.     //结果输出至两个文本框  
  43.     document.form1.availHeight.value = winHeight;  
  44.     document.form1.availWidth.value = winWidth;  
  45. }  
  46.  
  47. findDimensions();  
  48.  
  49. //调用函数,获取数值  
  50. window.onresize = findDimensions;  
  51.  
  52. //--> 
  53. </script> 
  54. </body> 
  55. </html> 

附 HTML 测试代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html "http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title>属性值测试</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  7. <style type="text/css"> 
  8. /* reset */  
  9. body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;}  
  10. body{font:12px/1.2 Arial, "宋体"; color:#333;vertical- align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;}  
  11. button, input, select, textarea, label{vertical-align:middle;}  
  12. img{vertical-align:top; border:none;}  
  13. ul, ol{list-style:none;}  
  14. a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;}  
  15. a:hover{text-decoration:none; color:#f76f0e;}  
  16. table{border-collapse:collapse; border-spacing:0;}  
  17. b{font-weight: normal;}  
  18.  
  19. /* test */  
  20. body{border:10px solid #6F6;}  
  21. .wrapper{width:800px;height:500px;border:1px solid #F00;margin:0 auto;}  
  22. .div1{margin-top:50px;border:1px solid #CCC;padding:10px;margin-left:10px;}  
  23. .div2{margin-top:70px;border:1px solid #00F;}  
  24. </style> 
  25. <script type="text/javascript" src="js/jquery.js"></script> 
  26. <script type="text/javascript"> 
  27.  
  28. </script> 
  29. </head> 
  30. <body> 
  31.     <div class="wrapper" id="wrapper"> 
  32.         <div class="div1" id="div1"> 
  33.             div1,div1,div1,div1,div1,div1,div1,div1,div1,  
  34.             div1,div1,div1,div1,div1,div1,div1,div1,div1,div1  
  35.         </div> 
  36.         <div class="div2" id="div2"> 
  37.             div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  38.             <br/> 
  39.             div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  40.             <br/> 
  41.             div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  42.             <br/> 
  43.             div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  44.             <br/> 
  45.             div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  46.         </div> 
  47.     </div> 
  48. </body> 
  49. </html> 

汇总

  1. ////////浏览器视口的高度  
  2. function windowHeight() {  
  3.     var myHeight = 0;  
  4.     if (typeof(window.innerHeight) == 'number') {  
  5.         //Non-IE  
  6.         myHeight = window.innerHeight;  
  7.     } else if (document.documentElement && (document.documentElement.clientHeight)) {  
  8.         //IE 6+ in 'standards compliant mode'  
  9.         myHeight = document.documentElement.clientHeight;  
  10.     } else if (document.body && (document.body.clientHeight)) {  
  11.         //IE 4 compatible  
  12.         myHeight = document.body.clientHeight;  
  13.     }  
  14.     return myHeight;  
  15. }  
  16. /////////浏览器视口的宽度  
  17. function windowWidth() {  
  18.     var myWidth = 0;  
  19.     if (typeof(window.innerWidth) == 'number') {  
  20.         //Non-IE  
  21.         myWidth = window.innerWidth;  
  22.     } else if (document.documentElement && (document.documentElement.clientWidth)) {  
  23.         //IE 6+ in 'standards compliant mode'  
  24.         myWidth = document.documentElement.clientWidth;  
  25.     } else if (document.body && (document.body.clientWidth)) {  
  26.         //IE 4 compatible  
  27.         myWidth = document.body.clientWidth;  
  28.     }  
  29.     return myWidth;  
  30. }  
  31. /**** 浏览器垂直滚动位置 ****/ 
  32. function scrollY() {  
  33.     var de = document.documentElement;  
  34.     return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;  
  35. }  
  36.  
  37. /**** 浏览器水平滚动位置 ****/ 
  38. function scrollX() {  
  39.     var de = document.documentElement;  
  40.     return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;  
  41. }  
  42.  
  43. /**** 当前页面高度 ****/ 
  44. function pageHeight() {  
  45.     return document.body.scrollHeight;  
  46. }  
  47.  
  48. /**** 当前页面宽度 ****/ 
  49. function pageWidth() {  
  50.     return document.body.scrollWidth;