Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/401.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用jQuery的内联元素的左偏移量_Javascript_Jquery_Offset - Fatal编程技术网

Javascript 使用jQuery的内联元素的左偏移量

Javascript 使用jQuery的内联元素的左偏移量,javascript,jquery,offset,Javascript,Jquery,Offset,我有以下一段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 co

我有以下一段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>
然而,这似乎没有产生正确的值,因为我可以清楚地看到,在600px宽度的一半处可以看到strong元素,但我得到的偏移值只有8px。


如何找到offset()。内联强元素的左值?

我认为offset是相对于文档的,而position是相对于父元素的


我认为偏移量是相对于文档的,而位置是相对于父文档的


发生的事情如下:

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

要解决此问题,请尝试以下插件:

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

下面是正在发生的事情:

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

要解决此问题,请尝试以下插件:

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

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

我有一种感觉,可能有比这更好的方法,但我能想到的解决这个问题的第一件事是在
前面插入另一个元素并检查其位置:

$("<span><span>").insertBefore($('#s')).offset();
$(“”)。在($('#s'))之前插入。偏移量();

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

我有一种感觉,可能有比这更好的方法,但我能想到的解决这个问题的第一件事是在
前面插入另一个元素并检查其位置:

$("<span><span>").insertBefore($('#s')).offset();
$(“”)。在($('#s'))之前插入。偏移量();

A(次要)优化为:1。var pos=标高偏移();2.el.移除();3:返回pos;而不是两次调用offset()并创建一个新对象返回。感谢机器,只需更改它:)
可以包含任意数量的元素,并且由于
offset()
只返回集合中第一行的偏移量,在所有
之前插入该
是没有意义的。在某个特定情况下存在巨大差异:当内联元素不在第一行,而是开始一个新的行时:在这种情况下,空的
保留在前一行,给出完全错误的结果。使用非空的i标记。在当前的Chrome 33.0.1750.46中,它出现问题,将返回错误的位置。可能会得到优化。一个(次要)优化将是:1。var pos=标高偏移();2.el.移除();3:返回pos;而不是两次调用offset()并创建一个新对象返回。感谢机器,只需更改它:)
可以包含任意数量的元素,并且由于
offset()
只返回集合中第一行的偏移量,在所有
之前插入该
是没有意义的。在某个特定情况下存在巨大差异:当内联元素不在第一行,而是开始一个新的行时:在这种情况下,空的
保留在前一行,给出完全错误的结果。使用非空的i标记。在当前的Chrome 33.0.1750.46中,它出现问题,将返回错误的位置。可能会被优化掉。