getBoundingClientRect() 获取页面元素的位置
document.getElement.getBoundingClientRect
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body style="width:1000px; height:1000px;">
<div id="test" style="position:absolute; left:300px; right:100px; width:200px; height:200px; background:red; top: 100px;">test为了方便就直接用绝对定位的元素</div>
<script>
document.getElementById('test').οnclick=function (){
if (document.documentElement.getBoundingClientRect) {
alert("left:"+this.getBoundingClientRect().left)
alert("top:"+this.getBoundingClientRect().top)
alert("right:"+this.getBoundingClientRect().right)
alert("bottom:"+this.getBoundingClientRect().bottom)
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
alert("test的位置是X:"+X+";Y:"+Y)
}
}
</script>
</body>
</html>