Cómo obtener la altura y el ancho del documento sin usar jquery

112

Cómo obtener la altura y el ancho del documento en pureza javascript es decir, sin usar jquery.
Yo sé $(document).height()y$(document).width() , pero quiero hacer esto enjavascript.

Me refiero a la altura y el ancho de la página.

javascript

— Saritha
fuente

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

— Klemen Tušar

119

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

Consulte: este artículo para una mejor explicación.

— Damb
fuente

9

Este no es un navegador cruzado. Deberías haber probado esto antes de publicarlo.

12

@Iwazaru Gracias por señalar eso. Parece que esta respuesta de 4 años no es a prueba de balas :)

— Damb

2

Parece que es para varios navegadores .

— MAChitgarha

Si un sitio web tiene un borde, lo quita del ancho con esta solución, pero no con la solución jQuery. Es poco probable que sea un límite en el cuerpo, pero vale la pena conocerlo. window.innerWidthresuelve esto

— BritishSam

Esto devuelve la altura de la ventana del navegador (si ajusta la altura del navegador, cambia), no la altura del contenido / página web.

— Radmation

56

Incluso el último ejemplo dado en http://www.howtocreate.co.uk/tutorials/javascript/browserwindow no funciona en el modo Quirks. Más fácil de encontrar de lo que pensaba, esta parece ser la solución (extraída del último código de jquery):

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

simplemente reemplace Ancho por "Alto" para obtener Alto.

— Dan
fuente

1

Esta debería ser la respuesta correcta. clientWidth no siempre tiene el valor correcto.

— Wildhammer

El problema con clientWidth es que solo se puede ver. scrollWidth incluye cosas que se filtran fuera de la pantalla. al menos, esto es cierto para mis experimentos de Chrome en 2019.

— StayCool

@StayCool parece que el jQuery más reciente todavía está usando este método para el cálculo de la altura / ancho del documento y da el mismo resultado que $(document).width(). Tal vez esté buscando algo como lo $(window).width()que en JS puro sería solo document.documentElement["clientWidth"]en los navegadores modernos.

— Dan

38

Esta es una solución para varios navegadores:

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

— Hamid
fuente

Esto es algo seguro y preciso para hacer

— Nan Zhou

1

esto devuelve la altura y el ancho de la ventana, no la altura y el ancho del documento

— Michael

25

Debe usarlo, getBoundingClientRectya que generalmente funciona en varios navegadores y le brinda una precisión de subpíxeles en el rectángulo de límites.

elem.getBoundingClientRect()

— Erik Aigner
fuente

1

para aquellos que se preguntan acerca del soporte: caniuse.com/#feat=getboundingclientrect

— Mike Gleason jr Couturier

esto devuelve una altura de 0 cuando lo usé en document.body

— Michael

Probablemente porque su cuerpo tiene una altura de 0. Si no cambia su tipo de pantalla, ese es el caso por defecto. Compruébalo en el inspector DOM.

— Erik Aigner

11

Obtenga el tamaño del documento sin jQuery

document.documentElement.clientWidth
document.documentElement.clientHeight

Y use esto si necesita tamaño de pantalla

screen.width
screen.height

— tamasviktor
fuente

8

También puedes probar:

document.body.offsetHeight
document.body.offsetWidth

— Mihai Frentiu
fuente

1

Tenga cuidado de usarlos en cosas como eventos de cambio de tamaño de ventana. tienen que calcular la altura y el ancho, lo que lleva un tiempo.

— Miles

8

Esto debería funcionar para todos los navegadores / dispositivos:

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

    return actualWidth;
}

— user937284
fuente

window.innerWidth es el único que también es correcto cuando las herramientas de desarrollo están abiertas en Chrome

— Alex

4

Si desea obtener el ancho completo de la página, incluido el desbordamiento, use document.body.scrollWidth.

— Arlen Beiler
fuente

¿Esta solución es para varios navegadores?

— devolución de llamada

1

¿Cómo averiguar el ancho y la altura del documento con mucha facilidad?

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

en javascript

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

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

Puede actualizar esto en cada evento de cambio de tamaño de ventana, si es necesario.

— Joshy Francis
fuente

0

windowes la ventana completa de la aplicación del navegador. documentes la página web que se muestra realmente cargada.

window.innerWidthy window.innerHeighttendrá en cuenta las barras de desplazamiento que pueden no ser las que desea.

document.documentElementes la página web completa sin la barra de desplazamiento superior. document.documentElement.clientWidthdevuelve el tamaño del ancho del documento sin la barra de desplazamiento y. document.documentElement.clientHeightdevuelve el tamaño de la altura del documento sin x barra de desplazamiento.

— usuario3798451
fuente