jquery - Get real offset left/top of element with inline offsetparent -


I am trying to get the coordinates of an element on one page. I'm using standard methods to get:

  var el = element, pos = {x: 0, y: 0}; While (L) {pos.x + = el.offsetLeft; Pos.y + = el.offsetTop; El = el.offsetParent; }   

But this method fails when the element in the question is display: block , and one is displayed in offset parents: Inline; . This is due to the fact described in this fact:

Element starts in the middle of the text

After trying some people with jQuery, they found out that their .offset () -method gives correct offset, and I have looked through the source but Actually did not get how they did. So my question is how do I get the right position? I can not use jQuery for this project, and the method is cumbersome, adding an element and testing is a lot of performance (performance perspective), and using Element.getBoundingClientRect is not available either .

If you feel like trying to get it out, then you can go to open your choice and type debugger in the following:

  var el, el2; El = el2 = document.query selector ('# span worldwide'); Var pos = {x: 0, y: 0}; While (L2) {pos.x + = el2.offsetLeft; Pos.y + = el2.offsetTop; El2 = el2.offsetParent; } Warning ("Calculated Status:" + pos.x + "x" + pos.y + "Window Size:" + screen.width + "x" + screen. Highlight);   

With this code I am getting: calculated status: 1354x 9 88 Window size: 1280x800 (i.e. offset is the path to the left screen, which is This is not clearly)

How is this possible? Any ideas about the work? Estimates? It should not be accurate, but should be better than before. Thank you.

EDIT: To clarify this, WebKit is for rendering engine.

I ended up with the webcit's window. Webkit ConvertPortformNotestepage , but I killed a bug where he would return completely to the wrong position. Further investigation revealed that if the node was displayed in the question: inline, then it would return the position of the last block element in the hierarchy.

Search for a resolution for this image is nothing (all I found out what WebKit ConvertPortformNototes actually did and had very basic information on the source code of WebKit.)

Estimate I found out that if element was display: inline-block , then if the element was inline then I changed it to inline-block and then calculated the status.

If anyone has a better solution to this problem then I would be happy to hear from you!

Edit:

Converting the display style to inline-block does not always look good, instead of doing it instead of using this method I am:

  var offset = {x: 0, y: 0}; If (getStyle (L, 'Display') == 'inline') {offset.x = el.offsetLeft - el.parentNode.offsetLeft; Offset.y = el.offsetTop - el.parentNode.offsetTop; } Var point = window.webkitConvertPointFromNodeToPage (al, new webkitpoint (0, 0)); Return {x: Math.round (point.x + offset.x), y: Math.round (point.y + offset.y)}   

I have an inline child's OffsetTop / Left And subtracting from his parents I'm not really sure how it works on his parents: inline, but it works 90%

But if someone has a better thought then I am still open to suggestions.

Comments