7

我有以下一段 HTML：

<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit <strong id="s">esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strong></p></div>

DIV 的宽度使用 CSS 固定为 600 像素。现在，我想找到<strong>元素的 offset().left。所以我做了：

alert( $("#s").offset().left );

然而，这似乎并没有产生正确的值，因为我可以清楚地看到强元素在 600 像素宽度的一半处被看到，但我得到的偏移值只有 8 像素。

如何找到内联强元素的 offset().left 值？

4

3 回答 3

26

这是正在发生的事情：

图表

由于内联元素跨越多行，jQuery 将为您提供该元素的最左侧位置，而不是元素开头的偏移量。

为了解决这个问题，试试这个插件：

jQuery.fn.inlineOffset = function() {
    var el = $('<i/>').css('display','inline').insertBefore(this[0]);
    var pos = el.offset();
    el.remove();
    return pos;
};

该插件将创建一个临时元素并将其插入到目标元素之前 - 然后它将返回该临时元素的偏移量。

示例用法：

alert( jQuery('strong').inlineOffset().left );
于 2009-06-15T12:41:10.640 回答
0

您得到 8px 结果的原因是因为即使元素从容器的一半开始，因为有一个换行符，它的左边缘距离页面 8px。

我有一种感觉，可能有比这更好的方法来做这件事，但我想解决这个问题的第一件事是在 the 之前插入另一个元素<strong>并检查它的位置：

$("<span><span>").insertBefore($('#s')).offset();
于 2009-06-15T12:42:16.393 回答
-1

我相信偏移量是相对于文档的，而位置是相对于父级的。

http://docs.jquery.com/CSS/position

于 2009-06-15T12:36:59.277 回答