Question

I’m developing a Google Chrome extension I’d like to track the locations (pixel coordinates) of all the anchors on a particular page. At present I have the following code, which iterates through all the anchors on the page.

function clickHandler(){ 
  // BUG: print this anchors location
  alert(this.top); 
}

var anchors = document.getElementsByTagName("a");
i=anchors.length;
while (i--) {
  anchors[i].addEventListener('click', clickHandler, false);
}        

How should I go about getting the x,y coordinates and width and height for the anchors? Trying the naive approach of just trying to access top and left properties for the anchors shows me that they are undefined.

Answer 1

How about offsetTop, offsetLeft, offsetWidth, offsetHeight. You have to recourse over offsetParent though to resolve the absolute coordinates.