首页 > 代码库 > JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
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 ==> 相对文档的水平座标+垂直方向滚动的量
实现代码：
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">03 <html xmlns="http://www.w3.org/1999/xhtml">04 <head>05 <title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">06 </meta></head>07 <body>08 <h2 align="center">请调整浏览器窗口大小</h2><hr />09 <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 测试代码：
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">02 <html xmlns="http://www.w3.org/1999/xhtml">03 <head>04 <title>属性值测试</title>05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />06 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">07 <style type="text/css">08 /* reset */09 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,div135 </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>
汇总
01 ////////浏览器视口的高度02 function windowHeight() {03 var myHeight = 0;04 if (typeof(window.innerHeight) == ‘number‘) {05 //Non-IE06 myHeight = window.innerHeight;07 } else if (document.documentElement && (document.documentElement.clientHeight)) {08 //IE 6+ in ‘standards compliant mode‘09 myHeight = document.documentElement.clientHeight;10 } else if (document.body && (document.body.clientHeight)) {11 //IE 4 compatible12 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-IE21 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 compatible27 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;51 }
JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。