div con display = "block" e clientWidth degli oggetti al suo interno

**is-katsura** · 02-04-2009, 12:52

Ciao a tutti!
Ho un div con display impostato a "none". Al suo interno ho un po' di oggetti, di uno in particolare (una tabella) vorrei misurare il clientWidth.
Il div principale, in quanto settato con display = "none", non occupa spazio, e lo stesso fanno gli oggetti al suo interno; pensavo di cavarmela dando alla tabella in questione questi settaggi:

codice:

table.style.visibility = "hidden";
table.style.position = "absolute";
table.style.display = "block"

Invece con un po' di prove, mi sono accorto che non funziona: ma position = "absolute" non dovrebbe rimuovere l'oggetto dal flusso della pagina? Mi aspettavo quindi che il div con display = "none" non avesse piu' effetto su un oggetto con position absolute.

Sotto ho postato il codice su cui mi sono messo a provare.
Grazie dell'attenzione,
Luca

(home.html)

codice:

<html>
<head>
sono il titolo
</head>
<body>
<script src="script.js"></script>
</body>
</html>

(script.js)

codice:

div=document.createElement('DIV'); // div principale
div.style.display = "none";
document.body.appendChild(div);
divInterno=document.createElement('DIV'); // div interno
div.appendChild(divInterno);
divInterno.style.width = "100px";
divInterno.style.height = "100px";
divInterno.style.backgroundColor = "red";
divInterno.style.position = "absolute"; // settaggi per misurare le dimensioni del div interno 
divInterno.style.visibility = "hidden";
divInterno.style.display = "block";
alert("divInterno clientWidth: " + divInterno.clientHeight);

PS: l'unica soluzione alternativa che mi viene in mente e' fare un cloneNode della tabella di cui voglio avere le dimensioni e appenderla a document.body con visibility = "hidden", ma non l'ho mai sentita questa, deve essere proprio brutta come soluzione immagino.

**Xinod** · 02-04-2009, 13:35

intanto e' offsetWidth
e funziona con buona approssimazione per elementi non nascosti (quindi occhio a questi display e visibility)

se hai problemi nel rilevare lo spazio fisicamente occupato da questi elementi senza farli vedere posizionali in maniera assoluta con top negativo molto alto, cosi' da uscire sicuramente fuori viewport

ciao

**is-katsura** · 02-04-2009, 13:59

Ti ringrazio per la risposta.
Scusami l'ignoranza, purtroppo non capisco bene cosa intendi, quando mi dici di posizionare gli oggetti con top negativo molto alto per uscire dal viewport. Cosa comporta uscire dal viewport?

Invece per quel che riguarda position = "absolute", togliere un oggetto dal flusso della pagina non significa "liberarlo" dai settaggi del suo contenitore?

**Xinod** · 02-04-2009, 14:21

Originariamente inviato da is-katsura
Cosa comporta uscire dal viewport?

comporta avere un elemento tecnicamente visibile (per poterne prendere le misure) ma praticamente invisibile

Invece per quel che riguarda position = "absolute", togliere un oggetto dal flusso della pagina non significa "liberarlo" dai settaggi del suo contenitore?

magari limitatamente al suo posizionamento (*), ma e' pur sempre figlio di suo padre

(* che non e' neanche un' affermazione completamente corretta, perche' se per esempio un contenitore fosse esplicitamente posizionato in maniera relativa, il suo contenuto, qualora posizionato in maniera assoluta, lo sarebbe rispetto al contenitore)

**is-katsura** · 02-04-2009, 14:47

Sono ancora qui che rompo.
Nel js che ho incluso nel primo post, ho aggiunto un

codice:

divInterno.style.top = "-100000"

prima dell'alert che ne stampa la offsetWidth (ho corretto come mi hai detto), ma ritorna ancora una larghezza pari a zero. Ho provato anche con misure piu' grande, ma con lo stesso risultato purtroppo.
Cosa sbaglio? Inoltre mi chiedo, non c'e' modo di misurare il viewport? Da quanto ho capito e' la lunghezza della pagina, quindi potrei individuare nell'albero degli elementi il tag <html> e leggerne il valore, e posizionarmi ad esempio piu' in basso, per uscirne? Mi piacerebbe fare una cosa il piu' pulita possibile (se hai qualche link a guide su viewport, ben vengano!).

PS Scusa le domande forse stupude, studio da poco il js ed e' la prima volta che ho a che fare con il viewport.

**Xinod** · 02-04-2009, 15:25

ritorna ancora una larghezza pari a zero.

togli div.style.display = "none";
il che ha perfettamente senso: se non occupa spazio come puoi rilevarne lo spazio fisicamente occupato?
un visibility hidden fa ancora occupare spazio all' elemento quindi l' offset riporta valori corretti

potrei individuare nell'albero degli elementi il tag <html> e leggerne il valore, e posizionarmi ad esempio piu' in basso, per uscirne?

ripeto: se non vuoi nascondere, appendi al body, con posizionamento assoluto e top settato a valore negativo altissimo

(se hai qualche link a guide su viewport, ben vengano!).

sottomano no

ciao

**is-katsura** · 02-04-2009, 15:32

Originariamente inviato da Xinod
togli div.style.display = "none";

Ok adesso ho capito. Il mio problema sta nel fatto che e' una cosa di lavoro, e non ho accesso al div superiore alla tabella (che in realta' e' una cosa che sta molto sopra al div in cui e' contenuta la tabella, e a volte c'e' a volte no, insomma sarebbe davvero poco pulito cercarlo risalendo l'albero DOM).
Quindi per adesso per risolvere creo una copia della tabella, la appendo a document.body con table.style.visibility="hidden", leggo l'offetWidth e faccio un document.body.removeChild(table), in modo da non avere piu' la tabella clone tra i piedi.
Ti ringrazio per l'aiuto,
Luca

Discussione: div con display = "block" e clientWidth degli oggetti al suo interno

Strumenti discussione

Ricerca discussione

Visualizza

div con display = "block" e clientWidth degli oggetti al suo interno

Permessi di invio