2013-04-25 19 views
7

per esempio,Come ottenere la posizione e la dimensione di un nodo di testo HTML usando javascript?

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

voglio ottenere la posizione e le dimensioni del nodo text di testo, non il suo div involucro. È possibile?

+0

è possibile ottenere la posizione div e poi si dovrà aggiungere qualsiasi padding superiore e sinistro e di frontiera. – Asken

+0

@ user125697: 'text' è un nodo, non un elemento. Non duplica di quella domanda. – benjaminchanming

+0

[questo] (http://stackoverflow.com/questions/7913631/jquery-get-position-of-character-in-a-div) può aiutarti – anpsmn

risposta

12

Nei browser moderni (recenti Mozilla, WebKit e Opera) è possibile utilizzare lo getClientRects() method of a DOM range che comprende il nodo di testo.

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

Questo codice funziona con il vecchio browser. in caso contrario, quale soluzione per il vecchio browser. – Domezchoc

+1

@Domezchoc: quali vecchi browser? Esiste una soluzione che utilizza ['TextRange'] (http://msdn.microsoft.com/en-us/library/ie/ms535872%28v=vs.85%29.aspx) in IE che è facile a patto che il tuo il nodo di testo è l'unico figlio di un elemento. Altrimenti, è ancora possibile, ma più lavoro per creare il TextRange. –

+0

intendo IE, ho capito. prima devo trovare TextRange e poi getClientRects. grazie – Domezchoc

Problemi correlati