HTML 元素的坐标答案

【问题标题】：Coordinates of HTML elementsHTML 元素的坐标
【发布时间】：2011-09-09 10:43:25
【问题描述】：

我将创建一个选择“套索”，用户可以使用它来选择表格的一部分。我认为在区域上放置一个 div 比尝试操纵单元格边框要容易得多。

如果您不明白我的意思，请打开电子表格并拖过一个区域。我希望 div 与单元格边框完美对齐。

我非常了解如何执行此操作，但如何获得表格单元格 (td) 的 (x,y) 坐标（屏幕位置）？

【问题讨论】：

标签： javascript jquery html html-table coordinates

【解决方案1】：

你可以使用 pageX 和 pageY 来追踪鼠标光标 x , y

$("#your_div").mouseover(function(e))
{
    x = e.pageX;
    y = e.pageY;
}

您可以设置 div 边框以在鼠标悬停时突出显示 div

$("#your_div").css("border","1px solid black");

这将显示当前的 div 可选效果...

如果 div 是

position:fixed 然后你可以读取它的 left 和 top 属性

希望对你有帮助

【讨论】：

感谢您的建议，但这不是我想做的。我只需要弄清楚如何获取 td 的屏幕坐标。
我认为，如果您使用 display:none 和 position:fixed 在该 td 内创建一个 div 左侧：继承和顶部：继承，那么您可以通过阅读左侧确定该 td 在屏幕上的位置和顶部.. 抱歉，我不知道更多，那可能是一些人发布了更好的回复。欢呼

【解决方案2】：

嘿，你应该可以这样做（jsFiddle）：http://jsfiddle.net/jackrugile/YKHkX/

$('td').hover(function(){
    var xPos = Math.floor($(this).offset().left);
    var yPos = Math.floor($(this).offset().top);
});

在我看来，Math.floor 摆脱了疯狂的小数并使其更易于使用。希望对您有所帮助！

【讨论】：

【解决方案3】：

如有必要，请使用 .offset() 以及 .height() 和 .width()。

var td = $(someTDReference);
var pos = td.offset();
pos.bottom = pos.top + td.height();
pos.right = pos.left + td.width();
// pos now contains top, left, bottom, and right in pixels

编辑：不是~~.position()~~，使用.offset()。以上更新。

编辑：将pos.width()更改为td.width()

【讨论】：

很好，+1。现在不知道包含右下角的位置。你是说第 4 行的 td.width() 吗？
@jackrugile - .position() 仍然只返回 top 和 left。在我的示例中，后面的代码行将bottom 和right 添加到从.position() 返回的对象中，方法是将.height() 和.width() 分别添加到top 和left。我这样做只是为了方便。
哦，我明白你现在在做什么了。我的不好，被误解了。所有四个位置的好方法。

【解决方案4】：

对于那些不想使用jquery的人：

var coordinates = td.getBoundingClientRect();
console.log(coordinates.left, coordinates.top, coordinates.right, coordinates.bottom);

【讨论】：