一切福田，不離方寸，從心而覓，感無不通。

javascript获取屏幕，浏览器，网页高度宽度

浏览器窗口宽：document.documentElement.clientWidth
浏览器窗口高：document.documentElement.clientHeight
网页可见区域宽：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
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width – border

clientHeight = height – border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、 offsetHeight均无关

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4.     <title>Screen Size Test</title>
  5.     <script language="JavaScript" type="text/JavaScript">
  6.         function displayScreenSize()  {
  7.             var bodyWidth           =document.body.clientWidth;      //网页可见区域宽
  8.             var bodyHeight          =document.body.clientHeight;     //网页可见区域高
  9.             var bodyWidthWithBorder =document.body.offsetWidth;      //网页可见区域宽(包括边线的宽)
  10.             var bodyHeightWithBorder=document.body.offsetHeight;     //网页可见区域高(包括边线的宽)
  11.             var bodyWidthWithScroll =document.body.scrollWidth;      //网页正文全文宽
  12.             var bodyHeightWithScroll=document.body.scrollHeight;     //网页正文全文高
  13.             var bodyTopHeight       =document.body.scrollTop;        //网页被卷去的上边距
  14.             var bodyLeftWidth       =document.body.scrollLeft;       //网页被卷去的左边距
  15.             var windowwindowTopHeight     =window.screenTop;               //网页正文部分上边距
  16.             var windowwindowLeftWidth     =window.screenLeft;              //网页正文部分左边距
  17.             var screenHeight        =window.screen.height;           //屏幕分辨率的高
  18.             var screenWidth         =window.screen.width;            //屏幕分辨率的宽
  19.             var screenAvailHeight   =window.screen.availHeight;      //屏幕可用工作区高度
  20.             var screenAvailWidth    =window.screen.availWidth;       //屏幕可用工作区宽度
  21.             var Str = "<p>";
  22.             Str+="网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>";
  23.             Str+="网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>";
  24.             Str+="网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>";
  25.             Str+="网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br>";
  26.             Str+="网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>";
  27.             Str+="网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>";
  28.             Str+="网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>";
  29.             Str+="网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>";
  30.             Str+="网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>";
  31.             Str+="网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>";
  32.             Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>";
  33.             Str+="屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>";
  34.             Str+="屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>";
  35.             Str+="屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>";
  36.             Str += "</p>";
  37.             document.getElementById('dispaly').innerHTML = Str;
  38.         }
  39. </script>
  40.     <style type="text/css">
  41.         A:link
  42.         {
  43.             text-decoration: none;
  44.             color: #ff0000;
  45.             font-weight: normal;
  46.         }
  48.         A:visited
  49.         {
  50.             text-decoration: none;
  51.             color: #ff6666;
  52.             font-weight: normal;
  53.         }
  55.         A:active
  56.         {
  57.             text-decoration: none;
  58.             color: #ff0000;
  59.             font-weight: normal;
  60.         }
  62.         A:hover
  63.         {
  64.             text-decoration: underline;
  65.             color: #ff0000;
  66.             font-weight: normal;
  67.         }
  69.         .title
  70.         {
  71.             font-family: Verdana, Arial, Helvetica, sans-serif;
  72.             font-size: 24px;
  73.             font-weight: bold;
  74.             color: #990000;
  75.         }
  77.         .display
  78.         {
  79.             font-family: Verdana, Arial, Helvetica, sans-serif;
  80.             font-size: 12px;
  81.         }
  83.         .data
  84.         {
  85.             color: #FF0000;
  86.             font-weight: bold;
  87.         }
  89.         .foot
  90.         {
  91.             font-family: Verdana, Arial, Helvetica, sans-serif;
  92.             font-size: 12px;
  93.             color: #5e5e5e;
  94.         }
  95.     </style>
  96. </head>
  97. <body onresize="javascript:displayScreenSize();" onload="javascript:displayScreenSize();">
  98.     <span class="title">Screen Size Test</span><hr align="left" size="1" noshade>
  99.     <span class="display">Now we get the screen size about this browser </span>
  100.     <br>
  101.     <span class="display" id="dispaly"></span>
  102.     <hr align="left" size="1">
  103.     <p align="right">
  104.         <span class="foot">Screen Size Test by <a href="http://www.w3cnet.com/">标准网络</a>
  105.         </span>
  106.     </p>
  107. </body>
  108. </html>

1
 

 

Copyright © 2024 Longsheng All rights reserved