특정 텍스트 위에 동적으로 DIV 위치 지정

웹 페이지의 한 줄에 긴 연속 된 텍스트 조각 (DNA 시퀀스를 나타냄)을 표시하고 있습니다. 모노 너비 글꼴을 사용하고 자바 스크립트를 사용하여 텍스트의 특정 문자 (예 : 20 번째 문자, 50 번째 문자 등)에서 DIV를 동적으로 배치하려고합니다. DIV를 배치하는 데 사용할 수있는 좌표를 계산하는 가장 좋은 방법은 무엇입니까? 브라우저에서 글꼴 크기를 변경하는 사용자에게 강력한 솔루션이 필요합니다.특정 텍스트 위에 동적으로 DIV 위치 지정

편집 됨 : http://jsfiddle.net/kQLqV/를 아래 코드가 추가

내가 예로서 jsfiddle 추가.

예를 들어, 10 번째 ~ 20 번째 글자 위에 파란색 상자를 배치 할 수 있습니다. 나는 자바 스크립트에서 이것을 동적으로 수행하여 텍스트의 다른 위치로 상자를 옮길 수 있기를 원합니다. 각 글자를 한 마디로 생각해 보았습니다.하지만 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>

출처

2013-01-20 James Ireland

몇 가지 코드를 포함 할 수 있습니까? 그것은 귀하의 특정 상황에 더 도움이 될 것입니다. 정확히 원하는 것을 시각화하는 데 어려움이 있습니다. 그래서 다른 div 내의 문자를 따르는 div가 필요합니까? – aug

일부 샘플 코드를 포함하면 정말 도움이 될 것입니다 :) – Terry

문자 및 글꼴 범위에서 수학을하지 않는 것이 좋습니다. 대신, 단일 문자 범위에서 문자열을 만든 다음 span 객체에 offsetWidth 및 offsetLeft (필요에 따라 높이 및 위쪽)를 사용하여 요소 크기 및 위치를 가져올 수 있습니다.

이 방법은 약간의 오버 헤드가 있으므로 도움이 필요한 범위를 병합 할 수 있습니다.

출처

2013-01-20 22:09:25 DrC

특정 텍스트 위에 동적으로 DIV 위치 지정

답변

관련 문제