StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjavascript: finding the absolute size of an anchored link
text
Body
copied!<p>I need to calculate the position, height and width of every anchored link in my page. I know how to find the x,y coords, but I have a problem with the height and width. The problem appears when the link has children inside (images, divs etc), so heightOffset and widthOffset won't work. Is there a way to do this without going on all the children and calculating their sizes?</p> <p>EDIT:</p> <p>Here is some code to demonstrate what I mean (the press function is called whenever the mouse is being pressed):</p> <pre><code>function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return [curleft,curtop]; } function getHeight(elem) { if (elem.style.pixelHeight) { return elem.style.pixelHeight; } else { return elem.offsetHeight; } } function getWidth(elem) { if (elem.style.pixelWidth) { return elem.style.pixelWidth; } else { return elem.offsetWidth; } } function press(e) { x= e.pageX; y= e.pageY; window.alert(x+","+y); var links = document.getElementsByTagName('a'); for (i = 0; i < links.length; i++){ var pos = findPos(links[i]); window.alert(x+","+y+" "+pos[0]+" " + pos[1] + " "+links[i].offsetWidth+ " "+links[i].offsetHeight); if (x >= pos[0] && x <= pos[0] + getWidth(links[i]) && y >= pos[1] && y <= pos[1] + getHeight(links[i])){ window.alert(links[i].href); i = links.length; } } } </code></pre> <p>When I encounter a link with an image for instance it doesn't return me the right size.</p> <p>Thanks</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload