0

我在网页的一行中显示一个长而连续的文本片段（代表 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>
4

1 回答 1

1

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

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

于 2013-01-20T22:09:25.253 回答