2011-02-01 21 views
7

Fondamentalmente, ho un determinato elemento HTML (in questo caso, un div) che si sta avviando su una nuova riga nel caso di una risoluzione dello schermo inferiore alla media, a causa di un elemento fluttuante. Voglio controllare questo comportamento, posizionando e/o modellando l'elemento in modo diverso se effettivamente è stato spostato o verrà eseguito il wrapping su ridimensionamento/onload.Un modo per determinare se un elemento è stato imballato?

È possibile?

+0

Che cosa succede se un utente vuole aumentare le dimensioni da C^+ o qualcosa di quella natura. Vuoi comunque ridimensionare l'elemento dato per avere una larghezza specifica? Ciò mi frustrerebbe se continuassi a ridimensionare ciò che stavo cercando di migliorare. – Chris

risposta

7

È possibile contare il numero di rettangoli di testo che utilizza utilizzando element.getClientRects(), che restituisce un oggetto ClientRect per ciascuna casella di bordo di un elemento. Questo deve essere fatto su un elemento in linea, ad esempio un <span> per ogni riga di testo per avere il suo border-box, ma è abbastanza semplice da usare:

window.onresize = function() { 
    var span = document.getElementById("myDiv").getElementsByTagName("span")[0], 
     rect = span.getClientRects(); 

    if (rect.length > 1) // more than 1 line of text 
     doSomethingWithElement(span.parentNode); 
} 
+0

Mi piace la direzione in cui sei diretto qui - ma diciamo che l'elemento contiene più di un semplice testo ... e allora? –

+1

@ChrisCashwell Calcola la larghezza di ogni elemento, mentre il looping, accumula le larghezze degli elementi e quando la larghezza accumulata supera la larghezza del contenitore, sai che l'elemento è stato avvolto. –

+2

@ChrisCashwell: anche se non contiene un testo semplice, si potrebbe fare '???. LastElementChild.offsetTop> 0'. – ninjagecko

Problemi correlati