浏览器窗口相关宽度和高度解析

网页尺寸与屏幕信息获取

最新推荐文章于 2021-12-07 11:12:43 发布

最新推荐文章于 2021-12-07 11:12:43 发布 · 190 阅读

文章标签：

#IE #JavaScript #Microsoft #HTML #工作 #ViewUI

Util 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个JavaScript函数，该函数用于获取网页的各种尺寸信息，包括可见区域的宽高、正文全文的宽高以及滚动位置等。此外还提供了获取屏幕分辨率和可用工作区尺寸的方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function test(){  
var    s  =  "";    
s  +=  "\r\n网页可见区域宽："+  document.body.clientWidth;    
s  +=  "\r\n网页可见区域高："+  document.body.clientHeight;    
s  +=  "\r\n网页可见区域高："+  document.body.offsetWidth  +"  (包括边线的宽)";    
s  +=  "\r\n网页可见区域高："+  document.body.offsetHeight  +"  (包括边线的宽)";    
s  +=  "\r\n网页正文全文宽："+  document.body.scrollWidth;    
s  +=  "\r\n网页正文全文高："+  document.body.scrollHeight;    
s  +=  "\r\n网页被卷去的高："+  document.body.scrollTop;    
s  +=  "\r\n网页被卷去的左："+  document.body.scrollLeft;    
s  +=  "\r\n网页正文部分上："+  window.screenTop;    
s  +=  "\r\n网页正文部分左："+  window.screenLeft;    
s  +=  "\r\n屏幕分辨率的高："+  window.screen.height;    
s  +=  "\r\n屏幕分辨率的宽："+  window.screen.width;    
s  +=  "\r\n屏幕可用工作区高度："+  window.screen.availHeight;    
s  +=  "\r\n屏幕可用工作区宽度："+  window.screen.availWidth;    
alert(s);    
}  
</script>
</head>
<body>
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<input type="button" name="test1" value="提交" onclick="test()">  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdafdfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<input type="button" name="test2" value="提交" onclick="test()">  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
<br>adfdafdasfdafdafdafdadadfadfadfdaf  
  
</body>
</html>