Rilevare larghezza div

[Francesco95]

Sto creando una galleria e mi serve che le immagini siano in dei quadrati con dimensione variabili (responsive)...
questi quadrati hanno larghezza 30% del contenitore impostata tramite css
ora io vorrei che l'altezza fosse uguale alla larghezza...
per farlo non essendoci un modo nei css mi hanno consigliato di usare js, però provando a fare un alert di ciò:

document.getElementById("divimg"+i).style.height

non mi esce proprio niente, nemmeno un undefined...

[cavicchiandrea]

https://developer.mozilla.org/en-US/...t/offsetHeight

[Francesco95]

Ti ringrazio ma sembra non funzionare:
HTML:

                <br>\
                <div id='divimg1'><img id='img1'></div>\
                <div id='divimg2'><img id='img2'></div>\
                <div id='divimg3'><img id='img3'></div>\
                <div id='divimg4'><img id='img4'></div>\
                <div id='divimg5'><img id='img5'></div>\
                <div id='divimg6'><img id='img6'></div>\

JS:

        function popolaImmagini(pagina){
            
            var posimg;
            
            for (var i=1;i<7;i++){
                
                posimg=document.getElementById("img"+i);
                
                if( (i+((pagina-1)*6)) <= maxnumimg ){
                    
                    posimg.src="immagini/"+cartella+"/"+(maxnumimg-(i+((pagina-1)*6))+1)+".png";    
                    posimg.className=misuraImmagine(posimg);
                    document.getElementById("divimg"+i).style.height=document.getElementById("divimg"+i).offsetWidth;
                    
                } else {
                    
                    posimg.src="";
                    posimg.className="imgnone";
                    
                }
                
            }


        }

CSS:

.corpodimnormgalleria > div > div{
    
    width: 30%;
    margin-left: 2.5%;
    margin-bottom: 2.5%;
    float: left;


}




.imgoriz{
    
    width: 100%;
    
}


.imgvert{
    
    height: 100%;
    margin: 0 auto;
    
}


.imgnone{
    
    display: none;
    
}

E' come se questa riga venisse ignorata:
document.getElementById("divimg"+i).style.height=d ocument.getElementById("divimg"+i).offsetWidth;

[cavicchiandrea]

Non mi sono studiato lo script ti segnala solo che

document.getElementById("divimg"+i).style.height=document.getElementById("divimg"+i).offsetWidth+'px';<-- mancano i pixel

[Francesco95]

Ok a parte quello (che avevo già provato e non funzionava comunque, ma concordo che vada messo), il problema penso sia di tempistica, nel senso che all'inizio mi da un valore offsetwitdh di 1024 (palesemente errato), poi se cambio pagina alla galleria e ritorno a pagina precedente (con uno script js che cambia gli src senza aggiornare la pagina) assume i valori giusti (300px circa)...
Credo quindi che magari all'inizio non abbia ancora caricato le immagini può essere?
Comunque ora ho modificato lo script così è anche più leggibile:

        function popolaImmagini(pagina){
            
            var posimg;
            var posdiv;
            var imgwidth;
            var misuraimg;
            
            for (var i=1;i<7;i++){
                /* carica le posizioni delle immagini e dei div contenitori */
                posimg=document.getElementById("img"+i);
                posdiv=document.getElementById("divimg"+i);
                
                if( (i+((pagina-1)*6)) <= maxnumimg ){
                    /* aggiorna l'src dell'immagine*/
                    posimg.src="immagini/"+cartella+"/"+(maxnumimg-(i+((pagina-1)*6))+1)+".png";    
                    /* verifica se l'immagine è orizzontale o verticale*/
                    misuraimg=misuraImmagine(posimg);
                    /* misura la larghezza del div contenitore dell'immagine */
                    imgwidth=posdiv.offsetWidth;
                    /* aggiorna l'altezza del div contenitore come la larghezza */
                    posdiv.style.height=imgwidth+'px';                
                    /* aggiunge la classe css in base all'orientamente dell'immagine */
                    posimg.className=misuraimg;


                    /*
                    if (misuraimg == "imgoriz"){
                        /* centra l'immagine se è orizzontale */
                    /*    posdiv.style.lineHeight=imgwidth;        
                    
                    }*/
                    
                } else {
                    
                    posimg.src="";
                    posimg.className="imgnone";
                /*    posdiv.style.height="0px";
                    posdiv.style.lineHeight="0px";*/
                    
                }
                
            }


        }

Ad esempio anche cliccando su galleria (bottone del menu) all'inizio vengono sfasate, poi se ci riclicco lo script funziona...

[Francesco95]

Infatti avevo un problema di tempistica con le animazioni che ritardavano le dimensioni dei div, ora ho risolto ti ringrazio