javascript - Jquery offset().left 和 position().left 返回意外值

Question

我正在尝试获取每个段落中句子的左侧位置值。我尝试了 .offset().left 和 position().left 但它们都返回了错误/意外的值。他们总是返回 18。

看看:https://jsfiddle.net/9tgkvqgk/1/

var offset = $(this).offset();
var position = $(this).position();
$('i').html(offset.left + " - - - " + position.left);//display

看起来单行 span 返回正确/良好的值，但多行句子没有。

我正在尝试显示工具提示，我需要始终在 div#frame 元素中显示它。我试图获取句子开头的左侧值，以便在正确的位置显示工具提示。

任何人都知道为什么它没有显示正确的值，或者我如何确定句子是从左侧、中间还是右侧开始。

谢谢。

Answer 1

返回的值不是“错误的”。基本上，该元素被包裹在一个不可见的盒子中，并返回该盒子的左偏移量。由于它跨越多行，因此该偏移量等于段落的左边距，这不是您所期望的。你想要的是<span>的第一个字母的偏移量，而不是整个 <span> 的偏移量.

尝试使用 this answer 的变体包裹一个新 child span围绕字符串的第一个字母，并获取它的偏移量。

function spanFirstLetter(elem) {
  var elem = $(elem).contents().filter(function() {
      return this.nodeType == 3
    }).first(),
    text = elem.text().trim(),
    first = text.slice(0, 1);
  if (!elem.length) return;

  elem[0].nodeValue = text.slice(first.length);
  // wrap the first letter in a unique class
  elem.before('<span class="first-letter">' + first + '</span>');
};

$('#frame p').find('span').hover(
  function(e) {
    // IN
    $(this).addClass('y');
    spanFirstLetter(this); // wrap the first letter
    var offset = $('.first-letter',this).offset(); 
  // get the first letter offset
    var position = $('.first-letter',this).position();
    $('i').text(offset.left + " - - - " + position.left);

  },
  function(e) {
    // OUT
    $(this).removeClass('y')
        .find('.first-letter').replaceWith($('.first-letter',this).text());
  // remove the first-letter span by replacing it with its own .text()
  }
)

https://jsfiddle.net/9tgkvqgk/5/