0

Web ページの 1 行に、長く連続したテキスト (DNA 配列を表す) の断片を表示しています。私は等幅フォントを使用しており、javascript を使用してテキスト内の特定の文字 (20 番目の文字、50 番目の文字など) に DIV を動的に配置したいと考えています。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 に答える