js中测试window对象中clientHeight、scrollHeight、屏宽

发布于:2014-09-23 09:27:19 - 查看:1373次

<html>

<head>

   <style type="text/css">

    .xy {

     color:blue;

     font-weight:bold;

     font-size:15px;

    }

    #box {

     background-color:aqua;

     width:100%;

     height:100%;

    }

    #heading {

     background-color:#800000;

     color:ffff00;

     text-align:center;

    }

   </style>

   <script type="text/javascript">

    function getXandY(){

     var Xa = window.event.clientX;

     var Ya = window.event.clientY;

     document.getElementById("xa").innerHTML = Xa;

     document.getElementById("ya").innerHTML = Ya;

     var Xb = window.event.x;

     var Yb = window.event.y;

     document.getElementById("xb").innerHTML = Xb;

     document.getElementById("yb").innerHTML = Yb;

     var Xc = window.event.screenX;

     var Yc = window.event.screenY;

     document.getElementById("xc").innerHTML = Xc;

     document.getElementById("yc").innerHTML = Yc;

     var screenHeight = window.screen.height;

     var screenWidth = window.screen.Width;

     document.getElementById("screenHeight").innerHTML = screenHeight;

     document.getElementById("screenWidth").innerHTML = screenWidth;

     var clientHeight = window.document.body.clientHeight;

     var clientWidth = window.document.body.clientWidth;

     var clientLeft = window.document.body.clientLeft;

     var clientTop = window.document.body.clientTop;

     document.getElementById("ch").innerHTML = clientHeight;

     document.getElementById("cw").innerHTML = clientWidth;

     document.getElementById("cl").innerHTML = clientLeft;

     document.getElementById("ct").innerHTML = clientTop;

     var scrollHeight = window.document.body.scrollHeight;

     var scrollWidth = window.document.body.scrollWidth;

     var scrollLeft = window.document.body.scrollLeft;

     var scrollTop = window.document.body.scrollTop;

     document.getElementById("sh").innerHTML = scrollHeight;

     document.getElementById("sw").innerHTML = scrollWidth;

     document.getElementById("sl").innerHTML = scrollLeft;

     document.getElementById("st").innerHTML = scrollTop;

     var offsetHeight = window.document.body.offsetHeight;

     var offsetWidth = window.document.body.offsetWidth;

     var offsetLeft = window.document.body.offsetLeft;

     var offsetTop = window.document.body.offsetTop;

     document.getElementById("oh").innerHTML = offsetHeight;

     document.getElementById("ow").innerHTML = offsetWidth;

     document.getElementById("ol").innerHTML = offsetLeft;

     document.getElementById("ot").innerHTML = offsetTop;

    }

   </script>

</head>

<BODY onmousemove="getXandY()">

   <div id="box">

    <div id="heading">

     <B>鼠标当前坐标测试</B>

    </div>

    <BR>

   

    <label>window.event.clientX:</label><label id="xa" class="xy"></label><BR>

    <label>window.event.clientY:</label><label id="ya" class="xy"></label><BR>

    <label>window.event.x      :</label><label id="xb" class="xy"></label><BR>

    <label>window.event.y      :</label><label id="yb" class="xy"></label><BR>

    <label>window.event.screenX:</label><label id="xc" class="xy"></label><BR>

    <label>window.event.screenY:</label><label id="yc" class="xy"></label><BR><BR>

    <label>window.screen.height:</label><label id="screenHeight" class="xy"></label><BR>

    <label>window.screen.Width:</label><label id="screenWidth" class="xy"></label><BR><BR>

    <label>window.document.body.clientHeight:</label><label id="ch" class="xy"></label><BR>

    <label>window.document.body.clientWidth:</label><label id="cw" class="xy"></label><BR>

    <label>window.document.body.clientLeft:</label><label id="cl" class="xy"></label><BR>

    <label>window.document.body.clientTop:</label><label id="ct" class="xy"></label><BR><BR>

    <label>window.document.body.scrollHeight:</label><label id="sh" class="xy"></label><BR>

    <label>window.document.body.scrollWidth:</label><label id="sw" class="xy"></label><BR>

    <label>window.document.body.scrollLeft:</label><label id="sl" class="xy"></label><BR>

    <label>window.document.body.scrollTop:</label><label id="st" class="xy"></label><BR><BR>

    <label>window.document.body.offsetHeight:</label><label id="oh" class="xy"></label><BR>

    <label>window.document.body.offsetWidth:</label><label id="ow" class="xy"></label><BR>

    <label>window.document.body.offsetLeft:</label><label id="ol" class="xy"></label><BR>

    <label>window.document.body.offsetTop:</label><label id="ot" class="xy"></label><BR><BR>

   

   </div>

</body>

</html>