网页中的坐标

来源：互联网发布：c 定义可变长度数组编辑：程序博客网时间：2024/04/29 08:17

<html>
<style type=text/css>
#mdiv
{
overflow:auto;
margin:30px;
padding:0px;
width:800px;
height:300px;
        cursor: default;
border:solid 5px red;
}
#cdiv
{
overflow:auto;
margin:50px;
padding:20px;
width:500px;
height:500px;
        cursor: default;
border:solid 5px blue;
}
#sdiv
{
overflow:auto;
margin:0px;
padding:20px;
width:300px;
height:1000px;
        cursor: default;
border:solid 1px black;
}
#rowa
{
margin:30px;
width:600px;
height:200px;
}
#zuo
{
        position:absolute;
        float:right;
        top:30px;
        right:10px;
        width:200px;
        display:none;
        border:solid 1px black;
        background-color:white;
}
body
{
        margin:0px;
padding:0px;

}
</style>
<script language="javascript">
function show(id)
{
   var obj=document.getElementById(id);
   //alert(obj);
   var scrollTop="scrollTop :"+obj.scrollTop;
   var scrollLeft="scrollLeft :"+obj.scrollLeft;
   var clientTop="clientTop :"+obj.clientTop;
   var clientLeft="clientLeft :"+obj.clientLeft;
   var offsetTop="offsetTop :"+obj.offsetTop;
   var offsetLeft="offsetLeft :"+obj.offsetLeft;
   var eventx="window.event.x:"+window.event.x
   var eventy="window.event.y:"+window.event.y
   var eventclientx="event.clientX:"+event.clientX;
   var eventclienty="event.clientY:"+event.clientY;
   var eventoffsetx="event.offsetX:"+event.offsetX;
   var eventoffsety="event.offsetY:"+event.offsetY;
   var eventscreenx="window.event.screenX:"+window.event.screenX;
   var eventscrenty="window.event.screenY:"+window.event.screenY;
   var bodyscrollTop="bodyscrollTop :"+document.body.scrollTop;
   var bodyscrollLeft="bodyscrollLeft :"+document.body.scrollLeft;
   var bodyclientTop="bodyclientTop :"+document.body.clientTop;
   var bodyclientLeft="bodyclientLeft :"+document.body.clientLeft;
   var bodyoffsetTop="bodyoffsetTop :"+document.body.offsetTop;
   var bodyoffsetLeft="bodyoffsetLeft :"+document.body.offsetLeft;

   var str=scrollTop+"/n"
          +scrollLeft+"/n"
          +clientTop+"/n"
          +clientLeft+"/n"
          +offsetTop+"/n"
          +offsetLeft+"/n"
          +"鼠标单击位置 :"+"/n"
          +eventx+"/n"
          +eventy+"/n"
          +eventclientx+"/n"
          +eventclienty+"/n"
          +eventoffsetx+"/n"
          +eventoffsety+"/n"
          +eventscreenx+"/n"
          +eventscrenty+"/n"
          +"网页坐标值：/n"
          +bodyscrollTop+"/n"
          +bodyscrollLeft+"/n"
          +bodyclientTop+"/n"
          +bodyclientLeft+"/n"
          +bodyoffsetTop+"/n"
          +bodyoffsetLeft+"/n"
   var objs=document.getElementById("zuo");
   objs.style.display="block";
   objs.innerText=str;
   objs.style.left=event.clientX;
   objs.style.top=event.clientY;
   event.cancelBubble=true; //阻止浏览器的默认行为把单击事件传给父对象。
}
function hide()
{
   var objs=document.getElementById("zuo");
   objs.style.display="none";
}
</script>
<body onclick=hide()>
<div id="mdiv" onclick=show('mdiv')>
<div id="cdiv" onclick=show('cdiv')>
    <div id="sdiv" onclick=show('sdiv');return false;>ss</div>
</div>
</div>
<div id="rowa">
   <p>margin :此为外补丁即边框距离其父对象的距离；上图中显示的红框div离窗口边框距离为30px；红蓝两个div之间为50px。padding为内补丁,蓝黑两个div之间距离为20px</p>
</div>
<div id="zuo">
</div>
</body>
</html>