How to get the actual values ​​for the left / right / top / bottom of an absolutely positioned element?

Question

(This seems like a simple question that was asked before, but if there is one, I cannot find it, although there are many similar ones that do not answer what I want.)

In Firefox (24.0) this code gives me what I want - the corresponding number of pixels:

jQuery('selector').css('right') 

In Chrome (34.0.1847.137 m) it only gives pixels to the left / top, but returns auto for the right / bottom.

There are various questions on SO explaining that this is the expected .css behavior, but I cannot find anything that explains how to get my desired behavior - for example, giving me calculated pixel values ​​for all four values.

Does JS or jQuery have a way to directly get these four values ​​that work sequentially across all browsers / scripts? (Or do I need to resort to ugly manual calculations?)

Clarification:
I need values ​​equivalent to the .css('right') values ​​that Firefox returns - this is the distance between the right edges of the current and parent element. This is not the same as the relative left + width values ​​that some functions return.

i.e. registered values ​​here should be numerically the same:

 elem = jQuery('selector') rect = someFunction( elem[0] ); console.log([ elem.css('left') , rect.left ]); console.log([ elem.css('right') , rect.right ]); console.log([ elem.css('top') , rect.top ]); console.log([ elem.css('bottom') , rect.bottom ]); 

If I am not mistaken in other answers, only kalley getRelativeClientRect answer meets these criteria.

Answer 1

you can use getBoundingClientRect . It will also consider any conversions if you use them.

You need to call it as jQuery('selector')[0].getBoundingClientRect() . Or use vanilla javascript, for example 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 QS calls with older getElementById types, etc.

Here you can use the function if you want it to refer to it as a parent:

 function getRelativeClientRect(el) { var rect = 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 }; } 

Answer 2

There is a built-in way to do this in Javascript without JQUERY. There are two special ones that I will show you, one of them is JS and CSS, the 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 ways to do this with and without jQuery. I prefer not to use jQuery at all (even though it's awesome), and I know that others prefer not to use jQuery. If you want to use jQuery, I would recommend using jQuery, as @farincz did. If not, then better or getBoundingClientRect better. It is best to use .style.top or .style.left in that you can not only get the actual values ​​for left / right / top / bottom, but you can also set them. This is great for things like drag-and-drop.

Answer 3

EDIT: this is approximately absolute position

Very old findPos function

http://www.quirksmode.org/js/findpos.html

Scrolling and Border Option

 function getPosition(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 javascript functions compatible with older browsers. this is why jQuery is not needed. Obviously, performance is much better than using jQuery.

Note2 : there are many other versions if you are looking for a search position

getBoundingClientRect

to get 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 dimensions, offsets, apply a CSS element if you want to use all compatible scripts.

The getPosition function is probably the best function (considering compatibility) that makes it easy to calculate these values.

Note: since there is a while loop inside the function, on very old machines you may get some problems with nested nested elements.

if you use html5 and css than for getBoundingClientRect

Note: maybe both will work when converting css3.

EDIT

I need values ​​equivalent to the .css ('right') values ​​that Firefox returns

To get these values, you first need to find the position of the element.

So: getPosition function or getBoundingClientRect

then you need to calculate the values ​​of top / bottom, left / right.

 left=x right=x-width top=y bottom=y-height 

EDIT2:

To apply this only to the parent element, you need to do getPosition also in the parent element

and the calculations are shown in @kalley's answer.

Answer 4

You can get it with $ (). offset - it returns the position in the document. Suppose p is the parent of your element.

then it will be on the left

 var left = $(el).offset().left - $(p).offset().left; 

right harder you should also use width

 var right = ($(p).offset().left + $(p).width()) - ($(el).offset().left + $(el).width()); 

The last thing is getting. You know it directly or find it in $ (el) .parents () It has a relative or absolute position.

Answer 5

Use the getBoundingClientRect () function, it gives you the values ​​on the left, right, top, bottom, width and height:

 var myid=document.getElementById("id").getBoundingClientRect(); var bottom=myid.bottom; var top=myid.top; var right=myid.right 

... etc.

Source: MDN | Element.getBoundingClientRect ()

Edition:

Get the coordinates relative to the page, not the viewport:

 var bodycoord=document.body.getBoundingClientRect(); var top-from-page=myid.top-bodycoord.top; var left-from-page=myid.left-bodycoord.top;