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

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新手).

提前谢谢,Dude-Dastic

Answer 1

link.offsetLeft和link.offsetTop.更多关于在这里找到位置.它们是相对于offsetParent的位置,但链接显示了相对于文档获取位置的方法.

如果父元素静态定位或者父层次结构中没有表,offsetParent将计算到正文.如果您想要一个非身体的位置,那么可能更新链接的父级以具有非静态位置relative

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