screen对象

游鹄君2025年4月30日小于 1 分钟
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>screen 对象</title>
  <style type="text/css">
  *{margin:0px;padding:0px;}
  #dv{width:100px;height:100px;border:solid 1px blue;}
  </style>
</head>
<body style='width:1600px;height:1600px'>
  <div id='dv'></div>
 
  <script type="text/javascript">
    //获取屏幕的宽
    console.log(window.screen.width);
    //获取屏幕的高
    console.log(window.screen.height);
    //获取可用区域的宽
    console.log(window.screen.availWidth);
    //获取可用区域的高
    console.log(window.screen.availHeight);
 
    //获取浏览器可视区域的宽
    console.log(document.documentElement.clientWidth);
    //获取浏览器可视区域的高
    console.log(document.documentElement.clientHeight);
 
    //获取浏览器全文档的宽
    console.log(document.documentElement.scrollWidth);
    //获取浏览器全文档的高
    console.log(document.documentElement.scrollHeight);
 
    //获取文档超出顶部隐藏部分的距离
    console.log(document.documentElement.scrollTop);
    //获取文档超出左侧隐藏部分的距离
    console.log(document.documentElement.scrollLeft);
  
  </script>
</body>
</html>