博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

获取页面宽高数据

Posted on 2011-10-20 17:50  PHP-张工  阅读(358)  评论(0)  编辑  收藏  举报

代码

<!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" >
<head>
    <title>无标题页</title>
    <style type="text/css">
    b{color:blue;}
    </style>
</head>
<body>
<div id="div1" style="width:2000px; height:3000px; font-family:Consolas;" ondblclick="showSize();">
</div>
<script type="text/javascript">
function show(str)
{
    eval('var value=' + str + ';');
    var strHTML = '<span>' + str + ': </span>';
    strHTML += '<b>'+value+'</b>';
    strHTML += '<br>';
    document.getElementById('div1').innerHTML += strHTML;
}
function showSize()
{
    show('document.body.clientWidth');
    show('document.body.clientHeight');
    show('document.body.offsetWidth');
    show('document.body.offsetHeight');
    show('document.body.scrollWidth');
    show('document.body.scrollHeight');
    show('document.body.scrollTop');
    show('document.body.scrollLeft');
    show('window.screenTop');
    show('window.screenLeft');
    show('window.screen.width');
    show('window.screen.height');
    show('window.screen.availWidth');
    show('window.screen.availHeight');
    show('document.documentElement.offsetWidth');
    show('document.documentElement.offsetHeight');
    show('document.documentElement.clientWidth');
    show('document.documentElement.clientHeight');
    show('document.documentElement.scrollWidth');
    show('document.documentElement.scrollHeight');
    document.getElementById('div1').innerHTML += '<hr>';
}
showSize();
</script>
</body>
</html>