how to get the top left x and y coordinate using javascript
我知道我们可以使用clientWidth和clientHeight获取宽度和高度，但是如何找出元素的左上角x和左上角y位置？
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}
Retrieve the position (X,Y) of an HTML element
Find X/Y of an HTML element with JavaScript
These two links should be helpful.
Using jQuery you can do this by calling .position() function. Like:
$('#mydiv').position().left;
$('#mydiv').position().top;
This is the most reliable way, since it already calculates the position checking the CSS of elements and its parents.
You can see the full implementation here:
http://code.jquery.com/jquery-1.7.1.js at line 9077
To get the top you need to add the offsetTop of the element and the element's offsetParent 's offsetTop . Do this all the way up the DOM to the document . That accounts for absolute, relative and fixed positioning. To get the left, do the same thing with offsetLeft .
These two functions add two properties to Element , documentOffsetTop and documentOffsetLeft , that will get top/left of any element:
window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
get: function () {
return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
}
} );
window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
get: function () {
return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
}
} );
This demo shows several combinations of element layout, comparing documentOffsetTop with jQuery's offset().top .
Demo: http://jsfiddle.net/ThinkingStiff/3G7EZ/
Script:
window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
get: function () {
return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
}
} );
var line = document.getElementsByClassName( 'grid-line' )[0],
grid = document.getElementById( 'grid' );
for( var index = 2; index < 100; index++ ) {
var copy = line.cloneNode();
copy.textContent = ( index * 10 );
grid.appendChild( copy );
};
var offset = document.getElementById( 'absolute' );
offset.textContent = 'absolute: '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.getElementById( 'static' );
offset.textContent = 'static: '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.getElementById( 'static2' );
offset.textContent = 'static: '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.getElementById( 'relative' );
offset.textContent = 'relative: '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.getElementById( 'fixed-side' );
offset.textContent = 'fixed/absolute (side): '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.getElementById( 'fixed-top' );
offset.textContent = 'fixed/absolute (top): '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.getElementById( 'fixed-bottom' );
offset.textContent = 'fixed/absolute (bottom): '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.querySelectorAll( '#relative-wrapped-absolute div' )[0];
offset.textContent = 'absolute/relative/static (absolute/relative wrapped): '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
offset = document.querySelectorAll( '#static-wrapped-static div' )[0];
offset.textContent = 'static (static wrapped): '
+ offset.documentOffsetTop + ', $'
+ $( offset ).offset().top;
HTML:
<div id="static" class="offset">0</div>
<div id="static2" class="offset">0</div>
<div id="static-wrapped-static"><br /><div class="offset">0</div></div>
<div id="absolute" class="offset">0</div>
<div id="relative" class="offset">0</div>
<div id="fixed-side" class="offset">0</div>
<div id="fixed-top" class="offset">0</div>
<div id="fixed-bottom" class="offset">0</div>
<div style="position: relative;"><div id="relative-wrapped-absolute"><div class="offset">0</div></div></div>
<div id="grid"><div class="grid-line">10</div></div>
CSS:
body {padding-left: 12px;}
#absolute {
top: 100px;
position: absolute;
}
#relative {
top: 150px;
position: relative;
}
#fixed-side {
right: 0;
position: fixed;
}
#fixed-top {
left: 50%;
position: fixed;
top: 0;
}
#fixed-bottom {
left: 50%;
position: fixed;
bottom: 0;
}
#relative-wrapped-absolute {
top: 8px;
position: relative;
}
#relative-wrapped-absolute div {
position: absolute;
top: 20px;
}
.offset {
border: 1px solid black;
}
#grid {
height: 100%;
left: 0;
position: absolute;
top: 1px;
width: 100%;
z-index: -1;
}
.grid-line {
border-bottom: 1px solid lightgray;
font-size: 8px;
height: 9px;
line-height: 20px;
}
Output:
