javascript - 如何将 div 放在 p 的特定行上？

Question

我有一个充满文本的

标签。当呈现到页面时，它以 5 行显示。我想设置

标签的样式和位置以突出显示给定的行，而无需触摸

标签或其内容，最好使用 jQuery。

所以标记看起来像

<p>one fish two fish red fish zoo fish fifth fish</p>

呈现的样子

一条鱼
两条鱼
红鱼
动物园的鱼
第五条鱼

我想要在 "red fish" 第 3 行的顶部有一个透明的红色 div。

我什么都没试过，我完全没有想法。

在回答 Matt Burland 的问题时: 我要创建一个函数，在给定元素 P 和行号的情况下，在呈现的那条线上放置一个彩色框。

p 可以呈现为任意数量的行。

窗口大小是固定的，所以这是我不必担心的一件事。

其他功能取决于页面的 DOM。我可以插入一个 div 标签，但不能插入其他东西。

最佳答案

DEMO

JS

$p = $('p').first();
$pHeight = $p.height()/5;
$pTop = $p.offset().top+(2*$pHeight);
$p.after('<div id="IvetriednothingandImalloutofideas" style="height:'+$pHeight+'px;top:'+$pTop+'px">');

CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvetriednothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}

关于javascript - 如何将 div 放在 p 的特定行上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20554313/

Answer 1

DEMO

JS

$p = $('p').first();
$pHeight = $p.height()/5;
$pTop = $p.offset().top+(2*$pHeight);
$p.after('<div id="IvetriednothingandImalloutofideas" style="height:'+$pHeight+'px;top:'+$pTop+'px">');

CSS

p {
    outline:1px solid #ccc;
    width:60px; 
}

#IvetriednothingandImalloutofideas {
    background-color:rgba(255,0,0,0.2);
    width:60px;
    position:absolute;
}