2013-04-25 12 views
7

na przykładJak uzyskać położenie i rozmiar węzła tekstowego HTML za pomocą javascript?

<div style="width:100px;text-align:center">text</div> 

Chcę, aby uzyskać pozycję i rozmiar węzła text tekstu, a nie jego div owijki. Czy to możliwe?

+0

można uzyskać pozycję div, a następnie będziesz musiał dodać dowolną górną i lewą dopełnienie i obramowanie. – Asken

+0

@ user125697: 'tekst' jest węzłem, a nie elementem. Nie powtarza tego pytania. – benjaminchanming

+0

[this] (http://stackoverflow.com/questions/7913631/jquery-get-position-of-character-in-a-iv) może pomóc – anpsmn

Odpowiedz

12

W nowoczesnych przeglądarkach (ostatnio-ish Mozilla, WebKit i Opera) można użyć getClientRects() method of a DOM range, który obejmuje węzeł tekstowy.

var textNode = document.getElementById("wombat").firstChild; 
 
var range = document.createRange(); 
 
range.selectNodeContents(textNode); 
 
var rects = range.getClientRects(); 
 
if (rects.length > 0) { 
 
    console.log("Text node rect: ", rects[0]); 
 
}
<div id="wombat">Wombat</div>

+0

Czy ten kod działa ze starą przeglądarką. jeśli nie, jakie rozwiązanie dla starej przeglądarki. – Domezchoc

+1

@Domezchoc: Jakie stare przeglądarki? Istnieje rozwiązanie wykorzystujące ['TextRange'] (http://msdn.microsoft.com/en-us/library/ie/ms535872%28v=vs.85%29.aspx) w IE, co jest łatwe, o ile Węzeł tekstowy jest jedynym dzieckiem elementu. W przeciwnym razie nadal jest możliwe, ale więcej pracy nad utworzeniem TextRange. –

+0

mam na myśli IE, mam to. najpierw muszę znaleźć TextRange, a następnie getClientRects. dziękuję – Domezchoc

Powiązane problemy