夏日博客

A-A+

JavaScript获取浏览器高度和宽度值兼容所有浏览器

2016年10月16日 前端设计 暂无评论 阅读 5 views 次

JavaScript获取浏览器高度和宽度值包括有：

documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight,下面我来给各位同学介绍。

实例,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <style type="text/css">  
  5. /* reset */  
  6. body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;}  
  7. body{font:12px/1.2 Arial, "宋体"; color:#333;vertical-align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;}  
  8. button, input, select, textarea, label{vertical-align:middle;}  
  9. img{vertical-align:top; border:none;}  
  10. ul, ol{list-style:none;}  
  11. a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;}  
  12. a:hover{text-decoration:none; color:#f76f0e;}  
  13. table{border-collapse:collapse; border-spacing:0;}  
  14. b{font-weight: normal;}  
  15. /* test */  
  16. body{border:10px solid #6F6;}  
  17. .wrapper{width:800px;height:500px;border:1px solid #F00;margin:0 auto;}  
  18. .div1{margin-top:50px;border:1px solid #CCC;padding:10px;margin-left:10px;}  
  19. .div2{margin-top:70px;border:1px solid #00F;}  
  20. </style>  
  21. <head>  
  22. <title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">  
  23. </meta></head>  
  24. <body>  
  25. <h2 align="center">请调整浏览器窗口大小</h2><hr />  
  26. <form action="#" method="get" name="form1" id="form1">  
  27. <!--显示浏览器窗口的实际尺寸-->  
  28. 浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />  
  29. 浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />  
  30. </form>  
  31. <script type="text/javascript">  
  32. <!--  
  33. var winWidth = 0;  
  34. var winHeight = 0;  
  35. //函数：获取尺寸  
  36. function findDimensions() {  
  37.  //获取窗口宽度  
  38.  if (window.innerWidth) {  
  39.   winWidth = window.innerWidth;  
  40.  } else if ((document.body) && (document.body.clientWidth)) {  
  41.   winWidth = document.body.clientWidth;  
  42.  }  
  43.  //获取窗口高度  
  44.  if (window.innerHeight) {  
  45.   winHeight = window.innerHeight;  
  46.  } else if ((document.body) && (document.body.clientHeight)) {  
  47.   winHeight = document.body.clientHeight;  
  48.  }  
  49.  //通过深入Document内部对body进行检测，获取窗口大小  
  50.  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {  
  51.   winHeight = document.documentElement.clientHeight;  
  52.   winWidth = document.documentElement.clientWidth;  
  53.  }  
  54.  //结果输出至两个文本框  
  55.  document.form1.availHeight.value = winHeight;  
  56.  document.form1.availWidth.value = winWidth;  
  57. }  
  58. findDimensions();  
  59. //调用函数，获取数值  
  60. window.onresize = findDimensions;  
  61. //-->  
  62. </script>  
  63. <div class="wrapper" id="wrapper">  
  64.   <div class="div1" id="div1">  
  65.    div1,div1,div1,div1,div1,div1,div1,div1,div1,  
  66.    div1,div1,div1,div1,div1,div1,div1,div1,div1,div1  
  67.   </div>  
  68.   <div class="div2" id="div2">  
  69.    div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  70.    <br/>  
  71.    div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  72.    <br/>  
  73.    div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  74.    <br/>  
  75.    div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  76.    <br/>  
  77.    div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,  
  78.   </div>  
  79.  </div>  
  80. </body>  
  81. </html>  

IE中：

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

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

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

FireFox中：

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

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

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

Opera中：

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

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

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

没有定义W3C的标准，则

IE为：

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上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

(注意：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

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 ==> 相对文档的水平座标+垂直方向滚动的量

标签：

给我留言