在特定文本上动态定位 DIV答案

【问题标题】：Dynamically position a DIV over specific text在特定文本上动态定位 DIV
【发布时间】：2013-01-03 23:43:48
【问题描述】：

我在网页的单行上显示一个长而连续的文本片段（代表 DNA 序列）。我正在使用单宽字体，并希望使用 javascript 将 DIV 动态定位在文本中的某个字符（例如第 20 个字符、第 50 个字符等）。计算可用于定位 DIV 的坐标的最佳方法是什么？我需要该解决方案对用户在浏览器中更改字体大小具有鲁棒性。

已编辑：

我添加了一个jsfiddle作为例子：http://jsfiddle.net/kQLqV/并添加了下面的代码。

在示例中，例如，我希望能够将蓝色框定位在第 10-20 个字母上。我希望能够在 javascript 中动态地执行此操作，以便可以将框移动到文本中的不同位置。我确实考虑过将每个字母放在一个跨度中，但考虑到可能有大约 1000 个字母，对于看起来应该微不足道的东西来说，开销似乎很高。

<style>
.sequence {
  font-family: Courier;
  font-size:12px;
  width: 70%;
  overflow: hidden;
  float: left;
  position: relative;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<body>

<div id="my_seq" class="sequence">CAGCATCAGCATACGACTACGACGACTCAGCGACTACAGCATACGACGGGSCAAGGTACTGATCATAAATGCATAGACGATAAGACATAGAACGATAAGAGATTACGA...</div>

<script>
$("#my_seq").append("<div style='position:absolute; min-height: 100%; background-color:rgba(30,144,255,0.3); top:0; left:20px; width: 200px;'> </div>");
</script>

</body>

【问题讨论】：

你能包含一些代码吗？这将有助于我们更好地适应您的具体情况。我很难想象你到底想要什么。所以你想要一个 div 跟随另一个 div 中的字符？
包含一些示例代码会很有帮助，真的:)

标签： javascript html css font-size

【解决方案1】：

我会避免对字符和字体范围进行数学计算。取而代之的是，将字符串由单个字符跨度组成，然后您可以使用跨度对象上的 offsetWidth 和 offsetLeft（如果需要，还包括 Height 和 Top）来获取元素大小和定位。

这种方法会产生一些开销，所以如果你可以合并跨度应该会有所帮助。

【讨论】：