How to get top and left style property values in Javascript

Question

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 toggle(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

possible duplicate of http://stackoverflow.com/questions/160144/find-x-y-of-an-html-element-with-javascript — Diodeus - James MacFarlane, Apr 16 '10 at 19:57
I never saw that post. Nice reference, though. Thanks Diodeus! — Dude-Dastic, Apr 16 '10 at 20:01

Bob · Accepted Answer · 2010-04-16T22:26:08.190

7

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

edited Apr 16 '10 at 22:26

answered Apr 16 '10 at 20:01

Bob

7,851
5
36
48

Thanks for the tip, Bob. I'm gonna check it out. – Dude-Dastic Apr 16 '10 at 20:03
Tried it, but it didn't go so well. The values appear to be relevant to the document and not the parent. – Dude-Dastic Apr 16 '10 at 20:34
@Dude-Dastic Just offsetTop and offsetLeft by themselves will give results relative to offsetParent if that's what you need – Bob Apr 16 '10 at 20:50
@Bob I tried your previous suggestion. However, I still get incorrect results. offsetTop and offsetLeft by themselves still return values relevant to the document. – Dude-Dastic Apr 16 '10 at 21:49
@Bob Oops!!! You were right. My tests were wrong. Everything is working perfectly now. Thanks! – Dude-Dastic Apr 16 '10 at 22:23
offsetParent sometimes evaluates to the document. See http://www.quirksmode.org/dom/w3c_cssom.html Change the parent of the links to position:relative or something other then static...Let me edit to update – Bob Apr 16 '10 at 22:23

score 1 · Answer 2 · answered Apr 16 '10 at 20:09

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;
    });
});

Thanks for the code, CalebD. Unfortunately, it didn't work. Coordinates were never captured, and there was no toggle effect. — Dude-Dastic, Apr 16 '10 at 20:14

How to get top and left style property values in Javascript

2 Answers2