How to get top and left style property values in Javascript

I have a little bit of Javascript that almost works correctly. Here's the code:

function toggle(curlink) {
 curlink.style.backgroundColor = curlink.style.backgroundColor == "yellow" ? "transparent" : "yellow";
 var maindiv = document.getElementById("grid");
 var links = maindiv.getElementsByTagName("a");
 var list = "";
 for (var i = 0; i < links.length; ++i) {
  var link = links[i];
  if (link.style.backgroundColor == "yellow") {
   list += ("," + parseInt(link.style.left, 10) + "-" + parseInt(link.style.top, 10));
  }
 }
 document.theForm.theList.value = list.substring(1);
 return false;
};

window.onload = function() {
 var links = document.getElementById("grid").getElementsByTagName("a");
 for (var i = 0; i < links.length; ++i) {
  links[i].onclick = function() { return toggl开发者_Python百科e(this); }
 }
};

The issue is with line #9; it only works when I specify values for the top and left style property of every link in the array. How do I get the top and left style property values (or X and Y coordinates) of each link in the array with Javascript when those values aren't given?

Also, what would the code above look like in jquery? Not that it's needed - I just want to reduce the code a little and dabble in the jquery framework (I'm a Javascript newbie).

Thanks in advance, Dude-Dastic

link.offsetLeft and link.offsetTop. More about finding position here. They'll be positions relative to the offsetParent, but the link shows a way to get position relative to the document.

offsetParent will evaluate to the body if the parent elements are positioned statically or there's no table in the parent hierarchy. If you want a position other than body then update the parent of the links to have a non-static position, perhaps relative

I'm not familiar with JQuery so I can't help there

The jQuery might look something like this. Untested.

$(function(){
    // Get all <a> descendents of #grid 
    var $anchors = $('#grid a');
    // Bind a click handler to the anchors.
    $anchors.click(function(){
        var $clickedAnchor = $(this);
        var coordinates = [];
        // Set the background color of the anchor.
        $clickedAnchor.css('background-color', $clickedAnchor.css('background-color') == 'yellow' ? 'transparent' : 'yellow');
        // Loop through each anchor.
        $anchors.each(function(){
            var $anchor = $(this);

            if ($anchor.css('background-color') == 'yellow') {
                var offset = $anchor.offset();
                coordinates.push(offset.left + '-' + offset.top);
                // Or maybe..
                // var parentOffset = $('#grid').offset();
                // coordinates.push((offset.left - parentOffset.left) + '-' + (offset.top - parentOffset.top));
            }
        });

        $('#theList').val(coordinates.join(','));

        return false;
    });
});