Come ottenere clientWidth e clientHight prima DIV è visibile

Question

Desidero ottenere le dimensioni di un elemento DIV (utilizzato per visualizzare un menu a comparsa nella posizione del cursore) mentre è style.display='none;', tuttavia le dimensioni del DIV restituiscono sempre 0. Il l'unico modo in cui mi sembra di essere in grado di ottenere le dimensioni è di rendere il DIV style.display='block;' a 0,0 e quindi spostarlo nella posizione richiesta, ma sembra assopito.

Ho provato a rendere il DIV visibile al di fuori dell'area dello schermo visibile ma non funziona. C'è un modo per ottenere i valori clientWidth e clientHeight mentre il DIV è nascosto?

Answer 1

Se il DIV non è visibile, non sarà possibile ottenere le sue dimensioni.

Tuttavia, esiste una soluzione alternativa. Il tuo div deve essere "visibile", ma ciò non significa che l'opacità e la posizione devono essere 1 e relative.

Imposta l'opacità su 0 e la posizione su "assoluto" e sarai in grado di ottenere le quote DIV.

---

EDIT

Dal momento che penso che più persone avranno un problema simile, sento che dovrei spiegare la mia risposta un po 'di più.

Se si tenta di ottenere la dimensione di un elemento nascosto con JavaScript, avrai sempre 0.

Quindi ci sono tecniche per ottenere la dimensione reale senza visualizzare l'elemento per l'utente. Il mio preferito è quello che ho già scritto sopra. Ecco i passaggi più dettagliati:

1. si imposta l'elementi di opacità a 0. In questo modo non verrà visualizzato per l'utente finale, mentre si stanno ottenendo le dimensioni.

2. imposta la posizione dell'elemento su "assoluto". In questo modo non occuperà spazio.

3. ora è possibile impostare il display su "blocco in linea".

4. leggi le dimensioni degli elementi. Questa volta otterrai i veri valori.

5. Si imposta il display su "nascosto" e si imposta l'opacità e si torna ai valori originali.

E ora hai le dimensioni di un elemento nascosto.

Answer 2

Se desideri conoscere le dimensioni di un elemento sullo schermo senza che sia visibile, è necessario che venga dipinto sullo schermo ma non mostrato.

Per ottenere clientHeight e clientWidth è necessario renderlo in modo che i calcoli possano essere eseguiti in base allo stato corrente delle schermate (a meno che non si disponga di larghezza e altezza pre-programmate, che suppongo non si)

si possono trovare maggiori informazioni a MDN here

Così avete opzioni:

• Crea il tuo div fuori schermo utilizzando il posizionamento (fixed o absolute) in combinazione con z-index o opacity
• uso width: 0 e height: 0 e overflow: hidden quindi utilizzare scrollHeight e scrollWidth per trovare la dimensione di overflow

scegliere quale opzione è meglio per il tuo sito, considerando le cose come la reattività e screen reflows and repaints