Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html> <head> <title>光标的位置坐标</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} .main{ width:500px; height:500px; margin:20px auto; border:1px solid #ccc; } p{ margin:0 auto; width: 500px; border:1px solid #ccc; height: 30px; line-height: 30px; padding-left:10px; } </style> </head> <body> <div class="main"></div> <p>坐标为<b id="show"></b></p> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementsByClassName('main')[0]; var oid=document.getElementById('show'); odiv.onmousemove=function(event){ var e=event || window.event; var m_x=e.clientX;//光标相对于文档的x轴坐标 var m_y=e.clientY;//光标相对于文档的y轴坐标 var d_x=this.offsetLeft;//div元素相对于文档x轴坐标 var d_y=this.offsetTop;//div元素相对于文档y轴坐标 var mx=e.offsetX;//光标相对于元素div的x轴坐标 var my=e.offsetY;//光标相对于元素div的y轴坐标 //即.mx=m_x-d_x,my=m_y-d_y //注释:元素相对于文档的位置,是指元素左上方顶点的位置!!! oid.innerHTML='('+m_x+' '+m_y+')'+' '+'('+mx+' '+my+')'+' '+'('+d_x+' '+d_y+')'; } } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例