Article Introduction: JS offset Screen scroll client. |
Obj.offset[widthheighttopleft] takes the position of the control relative to the parent control
Event.offset[xy] the coordinates of the mouse in the control that triggers the event
Event.screen[xy] mouse relative to screen coordinates
Event.client[xy] mouse relative to the coordinates of the page in the
Obj.scroll[widthheighttopleft] Gets the size of the object scrolling
Obj.client[widthheighttopleft] Gets the size of the visible area of the object
The following is the test code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
<!--
div{
Font-family: "The song Body";
font-size:12px;
Color: #000000;
}
#div1 {
Position:absolute;
Background-color: #f0f0f0;
width:200px;
height:200px;
left:20px;
top:0px;
Z-index:1;
}
#div2 {
Background-color: #cfc0cf;
width:200px;
height:210px;
Position:absolute;
left:261px;
top:347px;
z-index:100;
}
#div3 {
Background-color: #abbfbf;
width:200px;
height:200px;
Position:absolute;
left:20px;
top:247px;
z-index:100;
}
#div4 {
Background-color: #cfcfcf;
width:200px;
height:200px;
Position:absolute;
left:461px;
top:147px;
z-index:100;
}
-->
</style>
<body>
<div id= ' div1 ' >offset control's position relative to the parent form </div>
<script>
function offset (IDS) {
Ids.innerhtml= "offsetleft =" +ids.offsetleft+ "<BR>";
ids.innerhtml+= "offsetwidth =" +ids.offsetwidth+ "<BR>";
ids.innerhtml+= "offsetheight =" +ids.offsetheight+ "<BR>";
ids.innerhtml+= "offsettop =" +ids.offsettop+ "<BR>";
ids.innerhtml+= "Event.offset mouse position relative to control <BR>";
ids.innerhtml+= "OffsetX =" +event.offsetx+ "<BR>";
ids.innerhtml+= "OffsetY =" +event.offsety+ "<BR>";
}
function screen (IDS) {
Ids.innerhtml= "scrollwidth =" +ids.scrollwidth+ "<BR>";
ids.innerhtml+= "scrollheight =" +ids.scrollheight+ "<BR>";
ids.innerhtml+= "scrolltop =" +ids.scrolltop+ "<BR>";
ids.innerhtml+= "scrollleft =" +ids.scrollleft+ "<BR>";
}
function Client (IDS) {
Ids.innerhtml= "clientwidth =" +ids.clientwidth+ "<BR>";
ids.innerhtml+= "clientheight =" +ids.clientheight+ "<BR>";
ids.innerhtml+= "clienttop =" +ids.clienttop+ "<BR>";
ids.innerhtml+= "clientleft =" +ids.clientleft+ "<BR>";
}
function Eventc (IDS) {
Ids.innerhtml= "mouse relative to screen coordinates <br>event.screenx=" +event.screenx+ "<BR>";
ids.innerhtml+= "Event.screeny =" +event.screeny+ "<BR>";
ids.innerhtml+= "Mouse relative to the coordinates of the Web page event.clientx=" +event.clientx+ "<BR>";
ids.innerhtml+= "Event.clienty =" +event.clienty+ "<BR>";
}
</script>
</body>