How Do I Get The Actual Values For Left/right/top/bottom Of An Absolutely Positioned Element?
Solution 1:
you can use getBoundingClientRect
. It will take into account any transforms as well, if you are using them.
You'd need to call it like jQuery('selector')[0].getBoundingClientRect()
. Or use vanilla javascript like document.querySelector('selector').getBoundingClientRect()
, which will return a single element or document.querySelectorAll('selector')[index].getBoundingClientRect()
.
To summarize, in a slightly more readable format:
jQuery('selector')[0].getBoundingClientRect()
document.querySelector('selector').getBoundingClientRect()
document.querySelectorAll('selector')[index].getBoundingClientRect()
or replace the QS calls with older ones like getElementById
, etc.
Here's a function you could use if you wanted to get it relative to it's parent:
functiongetRelativeClientRect(el) {
varrect=el.getBoundingClientRect(),
parentRect=el.offsetParent.getBoundingClientRect();return {
bottom:parentRect.bottom-rect.bottom,
height:rect.height,
left:rect.left-parentRect.left,
right:parentRect.right-rect.right,
top:rect.top-parentRect.top,
width:rect.width
};
}
Solution 2:
There is a built-in way to do this in Javascript without JQUERY. There are two special ones I'll show you, one is JS and CSS, other is just JS.
element.style.left; //Gives you distance from left edge of your viewport.
element.style.top + "px"; //Gives you distance in pixels from top edge
element.style.right; //etc.//There is also the way of Offset. You do not need CSS at all for this.//Of course, Jquery has its own way of doing this, but I'll show JS-only
element.offsetTop; //Gives distance from top of viewport to top of element
element.offsetLeft; //Gives distance from left of viewport to left of element//etc.
As always, there are many more ways to do this with and without Jquery. I prefer not using Jquery at all (despite the fact that it is awesome), and I know others prefer not using Jquery too. If you want to use Jquery, I'd recommend using the Jquery way like @farincz did. If not, this way or getBoundingClientRect
is better. Best thing about using .style.top
or .style.left
is that you can not only get the actual values for left/right/top/bottom, but you can also set them. This is great for stuff like drag-and-drop.
Solution 3:
EDIT: this is about absolute position
Very old function findPos
http://www.quirksmode.org/js/findpos.html
Variante considering scroll & borders
functiongetPosition(el){
var x=0,y= 0;
while(el) {
x+=(el.offsetLeft-el.scrollLeft+el.clientLeft);
y+=(el.offsetTop-el.scrollTop+el.clientTop);
el=el.offsetParent;
}
return{x:x,y:y}
}
to get right
var info=getPosition(element);
console.log('marginRight: '+info.x-element.offsetWidth);
Note1: these are vanilla javascript functions that are compatible with older browsers. thats why jQuery is not needed.obiovsly the performance is much better than using jQuery.
Note2: there are many other versions if you search find position
getBoundingClientRect
to get the right
var info=element.getBoundingClientRect(); // Native Javascript ..think 1.6+console.log('marginRight: 'info.right-info.width);
Conclusion
There is no easy way to get the dimensions,offsets,applied css of an element if you want a allround compatible script.
the getPosition
function is probably the best function (considering compatibility) that allows you to easely calculate this values..
Note: as there is a while loop inside the function, on very old machines you could get some problems with heavely nested elements.
if your using html5 and css than go for getBoundingClientRect
Note: probably both break when using css3 transforms.
EDIT
I need values that are equivalent to the .css('right') values that Firefox returns
To get those values you first need to find the position of the element.
So:getPosition
function or getBoundingClientRect
then you need to calculate the top/bottom,left/right values.
left=x
right=x-width
top=y
bottom=y-height
EDIT2:
To apply this only to the parent element you need to execute getPosition
also on the parent element
and the calculations are shown in @kalley's answer.
Solution 4:
You can get it with $().offset - it returns position in document. Suppose p be parent element towards which is your element positioned.
then left is
var left= $(el).offset().left- $(p).offset().left;
right is more complicated, you must use also width
var right = ($(p).offset().left + $(p).width()) - ($(el).offset().left + $(el).width());
last thing is obtain p elment. You know it directly or find it in $(el).parents() It has position relative or absolute.
Solution 5:
Use function getBoundingClientRect(), it gives you left, right, top, bottom, width, height values:
var myid=document.getElementById("id").getBoundingClientRect();
var bottom=myid.bottom;
var top=myid.top;
var right=myid.right
... and so on.
Source: MDN | Element.getBoundingClientRect()
EDITED:
To get coordinates with respect to the page and not viewport:
var bodycoord=document.body.getBoundingClientRect();
var top-from-page=myid.top-bodycoord.top;
var left-from-page=myid.left-bodycoord.top;
Post a Comment for "How Do I Get The Actual Values For Left/right/top/bottom Of An Absolutely Positioned Element?"