How to get top and left style property values in Javascript - Stack Overflow

admin管理员组

文章数量:1278819

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

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

• javascript

Share Improve this question Follow asked Apr 16, 2010 at 19:49 Dude-DasticDude-Dastic 37811 gold badge55 silver badges1313 bronze badges 3

• possible duplicate of stackoverflow./questions/160144/… – Diodeus - James MacFarlane Commented Apr 16, 2010 at 19:57
• I never saw that post. Nice reference, though. Thanks Diodeus! – Dude-Dastic Commented Apr 16, 2010 at 20:01
• This question is similar to: Retrieve the position (X,Y) of an HTML element. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – Filburt Commented Feb 5 at 8:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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

本文标签： How to get top and left style property values in JavascriptStack Overflow