Come ottengo l'altezza del div che include l'area ritagliata del div?Ottieni altezza completa di un DIV ritagliato
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>
Beh, non si può fare in questo modo, ma è possibile quando l'aggiunta di un elemento interno al contenitore, in questo modo:
<div id="element" style="height: 20px; overflow: hidden;">
<p id="innerElement"> <!-- notice this inner element -->
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</p>
</div>
sidenote: contenuti avvolgimento all'interno dei paragrafi è una buona pratica anche, oltre a che un elemento in più non sta dando che gran parte dei problemi, se non del tutto ...
e JavaScript:
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
P.S. Perché questo JavaScript funzioni, mettilo dopo il tuo div #element, perché il semplice JavaScript viene eseguito prima che il DOM sia pronto se non viene richiesto di farlo. Per farlo funzionare quando DOM è pronto, check this.
Ma suggerirei di ottenere jQuery, sarà utile in seguito se estendere le operazioni JavaScript nel sito.
Plus, jQuery è la potenza, per davvero!
In questo modo, è sufficiente aggiungere questo script per il vostro <head /> (supponendo che hai jQuery inclusa):
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
Sì. Sembra che questo sia il modo migliore per farlo. Grazie. Oh e sì, amo jQuery. Bella biblioteca –
Suggerimento: (Questo mi ha appena catturato) se continui a ricevere 0 restituito da altezza o offsetAltezza, assicurati di aver impostato i tuoi elementi affinché siano visibili prima di eseguire la misurazione. –
Questo è un ottimo modo per farlo. Grazie! – Rook777
Questo non è possibile afaik. Quello che potresti provare è rimuovere lo stile e impostarlo usando javascript dopo aver ottenuto l'altezza. Non è la soluzione più elegante, ma penso che sia l'unico.
Ho dato corpo e ossa a quell'idea, IMO è abbastanza elegante quando è avvolto bene in una funzione. :) –
Ecco un modo per ottenere quello che ti serve, utilizzando Fabian idea:
function GetHeight() {
var oDiv = document.getElementById("MyDiv");
var sOriginalOverflow = oDiv.style.overflow;
var sOriginalHeight = oDiv.style.height;
oDiv.style.overflow = "";
oDiv.style.height = "";
var height = oDiv.offsetHeight;
oDiv.style.height = sOriginalHeight;
oDiv.style.overflow = sOriginalOverflow;
alert("Real height is " + height);
}
live demo e test case: http://jsfiddle.net/yahavbr/7Lbz9/
Sì, questo sarebbe. Anche se speravo di non dover rimuovere l'overflow prima di calcolare l'altezza. –
In realtà, questo risolve perfettamente il mio problema, poiché la velocità alla quale l'overflow è impostato/ripristinato non inserisce una scroll –
@Prakash poiché sto solo impostando una variabile, quindi ripristino l'overflow e l'altezza originali, è fatto entro un "segno" della CPU in modo che l'utente non veda alcun cambiamento nell'interfaccia utente. –
Funziona in tutti i casi, sia che si disponga di un nodo di testo all'interno o di un contenitore. Questo sta usando jquery, ma non è necessario.
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();
$ ('# elem') [0] restituisce l'elemento dom dalla chiamata jquery. quindi puoi usarlo su qualsiasi dom elem usando plain 'javascript.
per chiunque cerchi l'approccio migliore salta la risposta accettata e prova la risposta @Colt. –
Tranne quella risposta usa jQuery, e questa domanda non ha chiesto nulla su jQuery. – L0j1k
Penso che il punto fosse l'uso di 'scrollHeight' ... non il * jQuery * – Giraldi