<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 οnclick=hide()>
<div id="mdiv" οnclick=show('mdiv')>
<div id="cdiv" οnclick=show('cdiv')>
<div id="sdiv" οnclick=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>