Gets the implementation code for the relative position of the mouse in div

2020-03-30 01:12:05
OfStack

 
<HEAD> 
<TITLE> JS To obtain DIV Relative coordinates </TITLE> 
<script type="text/javascript"><!-- 
function getX(obj){ 
var parObj=obj; 
var left=obj.offsetLeft; 
while(parObj=parObj.offsetParent){ 
left+=parObj.offsetLeft; 
} 
return left; 
} 

function getY(obj){ 
var parObj=obj; 
var top=obj.offsetTop; 
while(parObj = parObj.offsetParent){ 
top+=parObj.offsetTop; 
} 
return top; 
} 

function DisplayCoord(event){ 
var top,left,oDiv; 
oDiv=document.getElementById("demo"); 
top=getY(oDiv); 
left=getX(oDiv); 
document.getElementById("mp_x").innerHTML = (event.clientX-left+document.documentElement.scrollLeft) -2+"px"; 
document.getElementById("mp_y").innerHTML = (event.clientY-top+document.documentElement.scrollTop) -2+"px"; 
} 
// --></script> 
</HEAD> 

<BODY style="margin:40px;" mce_style="margin:40px;"> 
<div style="background-color:#000000;color:#0011FF;width:300px;height:300px;position:absolute;top:80px;left:90px;margin:0px; border:0px;" id="demo" onmousemove="DisplayCoord(event)"> 
 I am a DIV, After the test , There are 2PX The error of the ... 
</div> 
 The current mouse coordinate is:  
X : <span id="mp_x"></span> 
Y : <span id="mp_y"></span> 
</body> 
</BODY> 

</HTML>

If not, you can try the

Document. The documentElement. ScrollLeft

replace

Document. Body. ScrollLeft