Prendere height da un elemento e copiarlo in un altro

[ligimus]

Salve a tutti, vorrei capire come poter copiare la proprietà height di un elemento e, dinamicamente tramite javascript, portarlo in un altro così che possa avere l'altezza di entrambi di egual misura. Grazie in anticipo.

[Enzaccio]

<script>
function eguaglia(n){
 alert('RILEVATI   dal  DIV  ID="D' + n + '" :\n' + 
       '\n style.height = ' + document.getElementById("D" + n).style.height + 
       '\n offsetHeight = ' + document.getElementById("D" + n).offsetHeight );

 document.getElementById("D0").style.height=document.getElementById("D" + n).offsetHeight + "px";
 }
</script>

<style> div{width: 200px; float: left; margin: 8px; border: 1px dashed red} </style>

<div id="D1"><input value="Eguaglia a questo" onclick="eguaglia(1);" type="button"><br>
 Questo DIV cresce in altezza seguendo il contenuto.<br>
 <br>
 Il Valore può essere rilevato (numerico puro) solo con<tt> offsetHeight </tt>cui andrà aggiunto <tt> px </tt>.<br>
 <br>bla bla<br>bla bla<br>bla bla<br>bla bla
</div>

<div id="D2" style="height: 380px"><input value="Eguaglia a questo" onclick="eguaglia(2);" type="button"><br>
 Questo DIV è di altezza fissa in pixel assegnatagli dallo STYLE (uso dell' inline-style).<br>
 <br>
 Il Valore può essere rilevato sia con<tt> offsetHeight </tt> 
 che con<tt> style.height </tt> già inclusivo del suffisso<tt> px </tt>o<tt> % </tt>
</div>

<div id="D0">Questo DIV lo vogliamo eguagliare agli altri in altezza.</div>

[ligimus]

<script>
function eguaglia(n){
 alert('RILEVATI   dal  DIV  ID="D' + n + '" :\n' + 
       '\n style.height = ' + document.getElementById("D" + n).style.height + 
       '\n offsetHeight = ' + document.getElementById("D" + n).offsetHeight );

 document.getElementById("D0").style.height=document.getElementById("D" + n).offsetHeight + "px";
 }
</script>

Questo è il codice modficato per la mia necessità ma non si applica nessuna modifica, rimane tutto secondo i parametri. L'elemento da cui prendere l'height (a cui non è impostato ma è preso in causa al suo contenuto) è #modificabile. Il codice dovrebbe essere questo:

<script  type="text/javascript">
 document.getElementById("modificabile").style.height=document.getElementById("barra").offsetHeight + "px";
 }
</script>

Aspetto vostre correzioni.

[cavicchiandrea]

L'adeguamento quando deve avvenire al caricamento pagina o al click?

[Vindav]

per avere due elementi con stessa altezza non ti serve usare javascript, ti basta il css.

Puoi usare i box flessibili di css3 (http://css-tricks.com/snippets/css/a-guide-to-flexbox/) o per i browser piu vecchi puoi fare qualcosa del genere: http://matthewjamestaylor.com/blog/e...s-3-column.htm

[ligimus]

L'adeguamento quando deve avvenire al caricamento pagina o al click?

Al caricamento della pagina.

per avere due elementi con stessa altezza non ti serve usare javascript, ti basta il css.

Puoi usare i box flessibili di css3 (http://css-tricks.com/snippets/css/a-guide-to-flexbox/) o per i browser piu vecchi puoi fare qualcosa del genere: http://matthewjamestaylor.com/blog/e...s-3-column.htm

Nella tua modalità quello che imposta l'height è il più alto invece a me servirebbe il più basso e si farebbe molto più semplicemente con Javascript.

[cavicchiandrea]

...
Nella tua modalità quello che imposta l'height è il più alto invece a me servirebbe il più basso e si farebbe molto più semplicemente con Javascript.

Pertanto al caricamento lo vuoi accorciare, nel elemento che vuoi accorciare dovrai aggiungerci un overflow:auto; o tramite css o tramite js altrimenti alcuni browser non terranno in considerazione la forzatura altri faranno uscire il contenuto altri ancora taglieranno il contenuto

<script>
window.onload=function(){
document.getElementById("id-elemento-da-accorciare").style.height=document.getElementById("id-elemento-recupero-altezza").offsetHeight + "px";
document.getElementById("id-elemento-da-accorciare").style.overflow='auto';
 }
</script>

[ligimus]

<script>
window.onload=function(){
document.getElementById("id-elemento-da-accorciare").style.height=document.getElementById("id-elemento-recupero-altezza").offsetHeight + "px";
document.getElementById("id-elemento-da-accorciare").style.overflow='auto';
 }
</script>

Intanto grazie perché mi sei stato di grande aiuto, funziona tutto fino a quando però non si va a cambiare la proporzione dello schermo, insomma non è dinamica la funzione ma statica nella presa dell'altezza che rimane sempre quella anche al cambio della misura del font (dinamicamente) dell'elemento principale. Grazie ancora.

[cavicchiandrea]

Non avevi parlato di responsive, vedi se con il meta <meta name="viewport" content="width=device-width, initial-scale=1"> risolvi alternative

[ligimus]

Non avevi parlato di responsive, vedi se con il meta <meta name="viewport" content="width=device-width, initial-scale=1"> risolvi alternative

Purtroppo niente rimane lo stesso. Nessun altra possibilità tramite javascript?