根据像素偏移在 DIV 中查找特定文本

Question

我想将图像标签插入到文本块中，以便图像在 DIV 中向下 100 像素。

    <div>
    A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
    </div>

因此，上面的标签被放入要浮动的文本块中，使其位于 DIV 中向下 100px 的位置。现在，这不能静态地完成，它必须在 javascript 中完成，因为 div 中向下 100px 可能由不同的文本表示，具体取决于字体渲染问题等。

那么，有没有办法找到 DIV 下方 100px 的文本块中的“单词”呢？也许是 jQuery？

Answer 1

简短的回答是否

这归结为 DOM 没有为您提供获取元素像素位置的方法。您可以对某些浏览器进行一些修改，但祝您好运，让解决方案发挥作用。

如果无法获取包含 div 的位置，则无法获取其中文本的位置。

抛开否，如果您要找到一种方法来获取 div 的像素高度，我将遵循类似于以下的过程。

1. 从 div 内部获取文本并将其存储在本地变量中。
2. 在文本中每个单词的循环内：
3. 在单词之前插入 div 标签。
4. 获取 div 标签的像素位置。
5. 用它来确定与像素位置向下 100 最接近的单词。
6. 获得最接近的位置后，创建一个文档片段来构建 div 的新内部，
7. 用文档片段替换 div 的内容。

Answer 2

聚会迟到了，很抱歉可能出现题外话。就我而言，文本存储为

中的

，并且我必须在 的垂直中心找到该元素（因此文本也是如此） div （用于根据其内容长度将 div 动态“拆分”为 2 列布局）。所以我做了这个：

function getElAtTheVerticalCenterOf(el) {
  //get el's rect and positions
  const bodyRect = document.body.getBoundingClientRect(),
        elRect = el.getBoundingClientRect(),
        scroll = elRect.y - bodyRect.y,
        marginLeft = elRect.x;

  //store current window scroll
  const orgX = window.scrollX, orgY = window.scrollY;

  //scroll to the vertical center of el to find the target
  const elHeight = el.clientHeight;
  window.scrollTo(0, scroll + elHeight/2);
  const target = document.elementFromPoint(marginLeft, 0);

  //scroll back to original window scroll
  window.scrollTo(orgX, orgY);

  return target;
}

主要思想是：

1. 获取滚动量。
2. 将 window 滚动到所需位置（以便在那里使用 elementFromPoint()）。
3. 让目标元素
4. 滚动回原始位置。

至于getBoundingClientRect()或elementFromPoint()，请查找相应的文章。请注意，offsetTop 是 int，对于此函数的工作来说不够准确。我简直不敢相信，但我必须坚持使用 getBoundingClientRect() (float) 而不是 offsetTop。