Come ottenere l'altezza e la larghezza del documento senza utilizzare jquery

112

Come ottenere l'altezza e la larghezza del documento in pure javascript cioè senza usare jquery.
Conosco $(document).height()e $(document).width(), ma voglio farlo dentrojavascript.

Intendevo l'altezza e la larghezza della pagina.

javascript

— Saritha
fonte

james.padolsey.com/javascript/get-document-height-cross-browser

— Klemen Tušar

119

var height = document.body.clientHeight;
var width = document.body.clientWidth;

Controlla: questo articolo per una migliore spiegazione.

— damb
fonte

9

Questo non è cross browser. Avresti dovuto testarlo prima di pubblicarlo.

12

@Iwazaru Grazie per averlo sottolineato. Sembra che questa risposta di 4 anni non sia a prova di proiettile :)

— Damb

2

Sembra che sia cross-browser .

— MAChitgarha

Se un sito Web ha un bordo, lo toglie dalla larghezza con questa soluzione ma non con la soluzione jQuery. È improbabile che sia un confine sul corpo, ma vale la pena conoscerlo. window.innerWidthrisolve questo

— BritishSam

Ciò restituisce l'altezza della finestra del browser (se si regola l'altezza del browser cambia), non l'altezza del contenuto / pagina web.

— Radmation

56

Anche l'ultimo esempio fornito su http://www.howtocreate.co.uk/tutorials/javascript/browserwindow non funziona in modalità Quirks. Più facile da trovare di quanto pensassi, questa sembra essere la soluzione (estratta dall'ultimo codice jquery):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

basta sostituire Larghezza per "Altezza" per ottenere Altezza.

— Dan
fonte

1

Questa dovrebbe essere la risposta corretta. clientWidth non ha sempre il valore corretto.

— Wildhammer

problema con clientWidth è che è solo visualizzabile. scrollWidth include cose che fuoriescono dallo schermo. almeno, questo è vero per i miei esperimenti su Chrome nel 2019.

— StayCool

@StayCool sembra che il jQuery più recente stia ancora utilizzando questo metodo per il calcolo dell'altezza / larghezza del documento e dà lo stesso risultato di $(document).width(). Forse stai cercando qualcosa di simile $(window).width()che in puro JS sarebbe solo document.documentElement["clientWidth"]sui browser moderni.

— Dan

38

Questa è una soluzione cross-browser:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

— amido
fonte

Questa è una cosa sicura e precisa da fare

— Nan Zhou

1

questo restituisce l'altezza e la larghezza della finestra, non l'altezza e la larghezza del documento

— Michael

25

Dovresti usare getBoundingClientRectcome di solito funziona cross browser e ti dà una precisione sub-pixel sul rettangolo dei bordi.

elem.getBoundingClientRect()

— Erik Aigner
fonte

1

per coloro che si interrogano sul supporto: caniuse.com/#feat=getboundingclientrect

— Mike Gleason jr Couturier

questo restituisce un'altezza di 0 quando l'ho usato su document.body

— Michael

Probabilmente perché il tuo corpo ha altezza 0. Se non cambi il tipo di visualizzazione, questo è il caso predefinito. Controllalo nell'ispettore DOM.

— Erik Aigner

11

Ottieni la dimensione del documento senza jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

E usalo se hai bisogno delle dimensioni dello schermo

screen.width
screen.height

— tamasviktor
fonte

8

Puoi provare anche:

document.body.offsetHeight
document.body.offsetWidth

— Mihai Frentiu
fonte

1

Fai attenzione a usarli in cose come eventi di ridimensionamento delle finestre. devono calcolare l'altezza e la larghezza, che richiede un po 'di tempo.

— Miglia

8

Questo dovrebbe funzionare per tutti i browser / dispositivi:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— user937284
fonte

window.innerWidth è l'unico corretto anche quando gli strumenti di sviluppo sono aperti su Chrome

— Alex

4

Se vuoi ottenere l'intera larghezza della pagina, incluso l'overflow, usa document.body.scrollWidth.

— Arlen Beiler
fonte

Questa soluzione è cross browser?

— richiamata

1

Come scoprire molto facilmente la larghezza e l'altezza del documento?

in HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

in javascript

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

Puoi aggiornarlo ad ogni evento di ridimensionamento della finestra, se necessario.

— Joshy Francis
fonte

0

windowè l'intera finestra dell'applicazione del browser. documentè la pagina web visualizzata che è effettivamente caricata.

window.innerWidthe window.innerHeightterrà conto delle barre di scorrimento che potrebbero non essere quelle che desideri.

document.documentElementè la pagina web completa senza la barra di scorrimento superiore. document.documentElement.clientWidthrestituisce la dimensione della larghezza del documento senza y barra di scorrimento. document.documentElement.clientHeightrestituisce la dimensione dell'altezza del documento senza la barra di scorrimento x.

— user3798451
fonte