javascript 获取网页高宽等信息

作者: 杨圣亮分类: 前端开发发布时间: 2016-10-19 21:43:55

做前端的时候，有些时候获取网页的相关信息是非常重要的，比如：一个返回顶部的js方法，就需要知道访客滚动屏幕到哪个位置了?当访客远离屏幕了，这个时候，返回顶部的图标就可以出来了，用户体验棒棒的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<TITLE>js获取网页相关信息</title>
	<style>
		body{width:960px;margin:20px auto}
		#web_info{border:1px solid #ccf;background: #ccc;margin:20px 10px;padding:10px;}

	</style>
</head>
<body>
	<div id="web_info"></div>
</div>
<script>
function getWebPageInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth +"px" + "<br />";
s += " 网页可见区域高："+ document.body.clientHeight +"px" + "<br />";
s += " 网页可见区域宽："+ document.body.offsetWidth +"px" + "<br />";
s += " 网页可见区域高："+ document.body.offsetHeight +"px" + "<br />";
s += " 网页正文全文宽："+ document.body.scrollWidth +"px" + "<br />";
s += " 网页正文全文高："+ document.body.scrollHeight +"px" + "<br />";
s += " 网页被卷去的高(ff)："+ document.body.scrollTop +"px" + "<br />";
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop +"px" + "<br />";
s += " 网页被卷去的左(not firefox)："+ document.body.scrollLeft +"px" + "<br />";
s += " 网页正文部分上座标(非火狐)："+ window.screenTop + "<br />";
s += " 网页正文部分左座标(非火狐)："+ window.screenLeft + "<br />";
s += " 网页正文部分上(fireofox)："+ window.screenX + "<br />";
s += " 网页正文部分左(firefox)："+ window.screenY+ "<br />";
s += " 屏幕分辨率的高："+ window.screen.height +"px" + "<br />";
s += " 屏幕分辨率的宽："+ window.screen.width +"px" + "<br />";
s += " 屏幕可用工作区高度："+ window.screen.availHeight +"px" + "<br />";
s += " 屏幕可用工作区宽度："+ window.screen.availWidth +"px" + "<br />";
s += " 你的屏幕设置是 "+ window.screen.colorDepth + " 位彩色" + "<br />";
document.getElementById("web_info").innerHTML = s;
} 
getWebPageInfo();

</script> 
</body>
</html

以上代码可直接使用，新建空白文件，复制上面的代码进去，存储为：.html格式。用浏览器打开该文档,就可以查看运行的结果了。

javascript js

javascript 获取网页高宽等信息

发表回复 取消回复

发表回复取消回复