我想在文本块中插入一个图像标记,这样图像就在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?
2条答案
按热度按时间aij0ehis1#
答案是no
基本上,它归结为DOM没有给予你一个方法来获得一个元素的像素位置。对于某些浏览器,你可以做一些黑客,但祝你好运,找到一个有效的解决方案。
如果你不能得到包含div的位置,你就不能得到其中的文本的位置。
**撇开no**不谈,如果你想找到一种方法来获得div的像素高度,我会遵循类似于下面的过程。
1.从div内部获取文本并将其存储在本地var中。
1.在文本中每个单词的循环内:
1.在单词前插入一个div标签。
1.获取div标签的像素位置。
1.使用此选项确定与像素位置100向下最接近的单词。
1.找到最近的位置后,创建一个文档片段来构建div的新内部
1.用文档片段替换div的内容。
42fyovps2#
迟到的聚会和抱歉的可能偏离主题。在我的例子中,文本存储为
<div>
中的<p>
s,我必须在div
的垂直中心找到元素(因此也是文本)(根据其内容长度动态地将div
“拆分”为2列布局)。所以我做了这个:主要思想是:
1.得到多少滚动。
1.滚动
window
到想要的位置(以便在那里使用elementFromPoint()
)。1.获取目标元素
1.滚动回原始位置。
关于
getBoundingClientRect()
或elementFromPoint()
,请查找相应的文章。请注意,offsetTop
是int
,并且对于此函数的工作来说不够准确。我简直不敢相信,但我不得不坚持使用getBoundingClientRect()
(float
)而不是offsetTop
。