javascript获取屏幕/显示器分辨率，以及各种高宽的检测

作者：简简单单 2013-08-02

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript获取屏幕/显示器<a href="http://www.111com.net/zhuanti/fenbianlv/" target="_blank">分辨率</a>，以及各种高宽的检测</title>
<style>
*{padding:0;margin:0;font-size:12px;font-family:Arial}
#content{padding:10px;background:#FFCC00;float:left}
b{color:red}
</style>
</head>

<body>
<div id="content"></div>

<script type="text/javascript">
function showWidth(){
    var  s = " ";
    s += "<p>网页可见区域宽："+ document.body.clientWidth;
    s += "</p><p>网页可见区域高："+ document.body.clientHeight;
    s += "</p><p>网页可见区域宽："+ document.body.offsetWidth + "　(包括边线和滚动条的宽)";
    s += "</p><p>网页可见区域高："+ document.body.offsetHeight + "　 (包括边线的宽)";
    s += "</p><p>网页正文全文宽："+ document.body.scrollWidth;
    s += "</p><p>网页正文全文高："+ document.body.scrollHeight;
    s += "</p><p>网页被卷去的高："+ document.body.scrollTop;
    s += "</p><p>网页被卷去的左："+ document.body.scrollLeft;
    s += "</p><p>网页正文部分上："+ window.screenTop;
    s += "</p><p>网页正文部分左："+ window.screenLeft;
    s += "</p><p><b>屏幕分辨率的宽："+ window.screen.width;
    s += "</b></p><p><b>屏幕分辨率的高："+ window.screen.height;
    s += "</b></p><p>屏幕可用工作区高度："+ window.screen.availHeight;
    s += "</p><p>屏幕可用工作区宽度："+ window.screen.availWidth;
    s += "</p><p>你的屏幕设置是"+ window.screen.colorDepth   + "   位彩色 ";
    s += "</p><p>你的屏幕设置"+ window.screen.deviceXDPI   + "   像素/英寸 </p>";
    document.getElementById('content').innerHTML = s;
}
window.onload = function(){
    showWidth();
}
window.onresize = function(){
    showWidth();
}
window.onscroll = function(){
    showWidth();
}
</script>

</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：原生js日历插件 js日历效果下一个：js 滚动条控件滚动至底部特效

相关文章

精彩推荐