JavaScript获取屏幕参数

为了更灵活的调整Web前端界面，可用JavaScript获取浏览器屏幕的参数。

网页可见区域宽度：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.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用区域高度：window.screen.availHeight
屏幕可用区域宽度：window.screen.availWidth

 

<!doctype html>
<html>
  <head>
   <title>Get screen parameters</title>
   <script type="text/javascript">
   function initialize() {
     document.getElementById("clientWidth").innerHTML = document.body.clientWidth;
     document.getElementById("clientHeight").innerHTML = document.body.clientHeight;
     document.getElementById("offsetWidth").innerHTML = document.body.offsetWidth;
     document.getElementById("offsetHeight").innerHTML = document.body.offsetHeight;
     document.getElementById("scrollWidth").innerHTML = document.body.scrollWidth;
     document.getElementById("scrollHeight").innerHTML = document.body.scrollHeight;
     document.getElementById("scrollTop").innerHTML = document.body.scrollTop;
     document.getElementById("scrollLeft").innerHTML = document.body.scrollLeft;
     document.getElementById("height").innerHTML = window.screen.height;
     document.getElementById("width").innerHTML = window.screen.width;
     document.getElementById("availHeight").innerHTML = window.screen.availHeight;
     document.getElementById("availWidth").innerHTML = window.screen.availWidth;
   }
   </script>
  <body onload='initialize()' style="width:60%;height:40%">
      <p>网页可见区域宽度：<span id="clientWidth" style="font-style:italic;"></span></p>
      <p>网页可见区域高度：<span id="clientHeight" style="font-style:italic;"></span></p>
      <p>网页可见区域宽度（包括边线的宽）：<span id="offsetWidth" style="font-style:italic;"></span></p>
      <p>网页可见区域高度（包括边线的高）：<span id="offsetHeight" style="font-style:italic;"></span></p>
      <p>网页正文全文宽度：<span id="scrollWidth" style="font-style:italic;"></span></p>
      <p>网页正文全文高度：<span id="scrollHeight" style="font-style:italic;"></span></p>
      <p>网页被卷去部分的高：<span id="scrollTop" style="font-style:italic;"></span></p>
      <p>网页被卷去部分的宽：<span id="scrollLeft" style="font-style:italic;"></span></p>
      <p>屏幕分辨率的高：<span id="height" style="font-style:italic;"></span></p>
      <p>屏幕分辨率的宽：<span id="width" style="font-style:italic;"></span></p>
      <p>屏幕可用区域高度：<span id="availHeight" style="font-style:italic;"></span></p>
      <p>屏幕可用区域宽度：<span id="availWidth" style="font-style:italic;"></span></p>
  </body>
</html>

posted on 2013-07-23 18:41  洪雁君  阅读(395)  评论(0)  编辑  收藏  举报

导航