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格式。用浏览器打开该文档,就可以查看运行的结果了。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

23  −    =  18

微信