Question

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

Answer 1

我会避免对字符和字体范围进行数学运算。相反，将字符串从单个字符跨度中移出，然后您可以使用offset对象上的offsetWidth和offsetLeft（如果需要还有Height和Top）来获取元素大小和位置。

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

动态地将DIV定位在特定文本上

1 个答案: