Skip to content

Instantly share code, notes, and snippets.

@williammalo williammalo/README.md forked from 140bytes/LICENSE.txt
Last active Oct 6, 2015

Embed
What would you like to do?
get offset of element

recursively checks every parent of the element to get the ABSOLUTE offset of the element.

call it like this:

getOff(element).x
getOff(element).y
function(a,x,y){
for(x=y=0;a;a=a.offsetParent) //Loop through element and all it's parents
x+=a.offsetLeft, //add offset of current element to variables x and y
y+=a.offsetTop;
return{x:x,y:y} //return object of x and y
}
function(a,x,y){for(x=y=0;a;a=a.offsetParent)x+=a.offsetLeft,y+=a.offsetTop;return{x:x,y:y}}
{
"name": "getOff",
"description": "returns the ABSOLUTE offset of an element",
"keywords": [
"css",
"position",
"offset",
"absolute"
]
}
<!doctype html>
<style>
#foo{position:relative;top:100px;margin:40px}​
</style>
<div id=foo></div>
<script>
getOff = function(a,x,y){for(x=y=0;a;a=a.offsetParent)x+=a.offsetLeft,y+=a.offsetTop;return{x:x,y:y}};
document.write(
getOff(document.getElementById("foo")).y
);
</script>
@atk

This comment has been minimized.

Copy link

commented Jun 28, 2012

Why not both in one function?

function(a,x,y){for(x=y=0;a;a=a.offsetParent)x+=(a.offsetLeft||0),y+=(a.offsetTop||0);return{left:x,top:y}}

Anyway, the offset method is not very precise in some browsers (especially in Quirks mode). A better way to go (if available) is to use getBoundingClientRect, though this results in relative positions to the visible browser window.

@williammalo

This comment has been minimized.

Copy link
Owner Author

commented Jun 28, 2012

@atk
:D I made it one function that returns an object. Thanks for the Idea!
I originally did this as part of a "smooth scrolling to hashlink" script.
... I could make it a prototype and the function would be hidden in a getter, so you could do:

document.getElementById("foo").x
document.getElementById("foo").y

it would be a much simpler syntax but the code would be longer...

@atk

This comment has been minimized.

Copy link

commented Jun 28, 2012

This reminds me too much of the ambigious old actionscript syntax... I'll rather take the object, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.