在jQuery中检索div的顶部和左侧偏移量答案

【问题标题】：Retrieving top and left offset of a div in jQuery在jQuery中检索div的顶部和左侧偏移量
【发布时间】：2025-12-28 18:30:12
【问题描述】：

要获取当前 div 的顶部和左侧 onclick 有这个。

<div class="channel" onclick="highlight_channel();">
    <p>Pax TV, 8am (Lima, Peru, in Spanish)</p>
</div>

function highlight_channel() {
    var highlight_top = $(this).position().top;
    var highlight_left = $(this).position().left;
    alert(highlight_top);
    var clear_highlight = document.getElementById("highlight");
    clear_highlight.parentElement.removeChild(clear_highlight); 
    $("#page").append('<div id="highlight" class="channel selected" style="top:'+highlight_top+'left='+highlight_left+'></div>');
}

这似乎没有得到信息。

【问题讨论】：

标签： jquery position offset

【解决方案1】：

如果你已经在使用 jQuery，为什么不使用 jQuery click 方法：

$('.channel').click(function() {
    var highlight_top = $(this).position().top;
    var highlight_left = $(this).position().left;
    alert(highlight_top);
    var clear_highlight = document.getElementById("highlight");
    clear_highlight.parentElement.removeChild(clear_highlight); 
    $("#page").append('<div id="highlight" class="channel selected" style="top:'+highlight_top+'left='+highlight_left+'></div>');

});

http://jsfiddle.net/ZbnZ9/

【讨论】：

jquery 点击函数是正确的方法。但是，对于我需要的东西，我必须将函数简化为只有$('.channel').removeClass("selected"); $(this).addClass("selected");。这可以突出显示单击的 div。我将脚本标签放在要突出显示的 div 之后，这很有效。这是小提琴jsfiddle.net/qeXZV。

【解决方案2】：

尝试offset() 而不是 position()。

【讨论】：

当结果用于设置元素的左上角时，offset() 函数是否正确？

【解决方案3】：

试试这个：

function highlight_channel() {
    offs = $(this).offset(); // <-- caching for better performance.
    var highlight_top = offs.top;
    var highlight_left = offs.left;
    alert(highlight_top);
    $("#highlight").replaceWith('<div id="highlight" class="channel selected" style="top:'+highlight_top+'left='+highlight_left+'></div>'); // <-- replacing #highlight the jQuery way
}

【讨论】：

谢谢。我带着关于 jquery .click 函数的答案去了。

【解决方案4】：

你错过了 " ; " 我认为。

$("#page").append('<div id="highlight" class="channel selected" style="top:'+highlight_top+'; left='+highlight_left+'; ></div>');

祝你好运。

【讨论】：

好的。这些是样式规范中需要的。但问题是我没有在正确的位置调用该函数。