Question

我有一点几乎可以正常工作的Javascript。这是代码：

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

问题在于第9行;它仅在我为数组中每个链接的top和left样式属性指定值时才有效。当没有给出这些值时，如何使用Javascript获取数组中每个链接的顶部和左侧样式属性值（或X和Y坐标）？

此外，上面的代码在jquery中会是什么样的？不是说需要它 - 我只是想减少代码并且在jquery框架中涉猎（我是一个Javascript新手）。

提前致谢，多德-Dastic

Answer 1

link.offsetLeft和link.offsetTop。更多关于寻找职位here的信息。它们将是相对于offsetParent的位置，但链接显示了相对于文档获取位置的方法。

如果父元素静态定位或父层次结构中没有表，

offsetParent将评估正文。如果您想要一个非身体的位置，那么更新链接的父级以具有非静态位置，也许relative

我不熟悉JQuery所以我无法帮助

Answer 2

jQuery可能看起来像这样。未经测试。

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

如何在Javascript中获取顶部和左侧样式属性值

2 个答案: