<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body{height:1000px; margin:0; padding:0; border:5px solid green; background:#999;} #tdiv{position:absolute; top:100px; left:300px; background:#eee; width:500px; height:300px;} </style> <script> function $(id){return document.getElementById(id);} window.onload=init; function init(){ $('tdiv').onclick=function(){ if(document.documentElement.getBoundingClientRect){ //若浏览器支持 getBoundingClientRect方法 alert('元素左边到浏览器视窗左上角的距离left:'+this.getBoundingClientRect().left+'\n'+'元素右边到浏览器视窗左上角的距离right:'+this.getBoundingClientRect().right+'\n 元素上边到浏览器视窗左上角的距离top:'+this.getBoundingClientRect().top+'\n 元素下边到浏览器视窗左上角的距离bottom:'+this.getBoundingClientRect().bottom) //getBoundingClientRect() 获得元素相对于浏览器窗口以左上角为原点的坐标系统的 坐标值 // 当文档内容向左滚动或向右滚动时 相对坐标值可能会为负数 } } } </script> </head> <body> <div id="tdiv">i am a div tag <br />top:100px; left:300px; background:#eee; 500px; height:300px;</div> </body> </html>