javascript 根据偏移量(以像素为单位)查找DIV中的特定文本

8i9zcol2  于 2023-06-28  发布在  Java
关注(0)|答案(2)|浏览(124)

我想在文本块中插入一个图像标记,这样图像就在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 DOWN处。现在,这不能静态地完成,它必须在JavaScript中完成,因为div中的100px可能由不同的文本表示,这取决于字体渲染问题等。
那么,有没有一种方法可以在DIV中100px的文本块中找到什么“单词”呢?也许是jQuery?

aij0ehis

aij0ehis1#

答案是no

基本上,它归结为DOM没有给予你一个方法来获得一个元素的像素位置。对于某些浏览器,你可以做一些黑客,但祝你好运,找到一个有效的解决方案。
如果你不能得到包含div的位置,你就不能得到其中的文本的位置。

**撇开no**不谈,如果你想找到一种方法来获得div的像素高度,我会遵循类似于下面的过程。

1.从div内部获取文本并将其存储在本地var中。
1.在文本中每个单词的循环内:
1.在单词前插入一个div标签。
1.获取div标签的像素位置。
1.使用此选项确定与像素位置100向下最接近的单词。
1.找到最近的位置后,创建一个文档片段来构建div的新内部
1.用文档片段替换div的内容。

42fyovps

42fyovps2#

迟到的聚会和抱歉的可能偏离主题。在我的例子中,文本存储为<div>中的<p> s,我必须在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.得到多少滚动。
1.滚动window到想要的位置(以便在那里使用elementFromPoint())。
1.获取目标元素
1.滚动回原始位置。
关于getBoundingClientRect()elementFromPoint(),请查找相应的文章。请注意,offsetTopint,并且对于此函数的工作来说不够准确。我简直不敢相信,但我不得不坚持使用getBoundingClientRect()float)而不是offsetTop

相关问题