Como pegar a altura e largura da página com JavaScript

Neste artigo você vai aprender a como pegar altura e largura da página com JavaScript, de uma maneira muito simples e com recursos nativos

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e também como resgatar as propriedades referentes a tela/navegador!

Para a nossa alegria, os desenvolvedores da linguagem JS foram muito eficazes em resolver este problema

Temos acesso ao objeto window, que possui o objeto screen

Este objeto tem diversas informações sobre o navegador, como a altura e largura, que é o que precisamos!

Então vamos ver um exemplo prático do resgate destas informações:

var altura = window.screen.height;
var largura = window.screen.width;

console.log(altura);
console.log(largura);

As propriedades são width, para largura, e height, para altura

Desta maneira conseguimos resgatar os valores necessários para realizar alguma outra lógica do nosso software

Lembrando que este dados são referentes ao monitor

Já se você precisa dos dados da janela/browser, o código é este:

var largura = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var altura = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

console.log(altura);
console.log(largura);

Com este snippet você consegue obter a altura e largura da área útil aberta no navegador

Ao redimensionar a tela, estes valores também serão alterados!

Conclusão

Neste artigo você aprendeu a como pegar a altura e largura da página com JavaScript

Utilizamos duas estratégias, o objeto screen: para receber a altura e largura da tela do usuário

E depois um snippet que nos ajuda a receber a área útil da tela aberta no momento, que pode ser alterada com o redimensionamento do usuário

Agora basta escolher qual das duas abordagens se encaixa a sua necessidade e aplicar no seu código a escolhida!

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Se liga numa pegadinha: o innerHeight te dá só a área visível, o que cabe na janela agora

Mas e se a página é comprida e tem scroll? A altura real do conteúdo é outra coisa

Pra isso tu usa o scrollHeight, que mede o documento inteiro, inclusive o pedaço que só aparece descendo a barra de rolagem

var alturaTotal = document.documentElement.scrollHeight; var larguraTotal = document.documentElement.scrollWidth;

console.log(alturaTotal); console.log(larguraTotal);

Resumindo: innerHeight é o que tu VÊ, scrollHeight é o que EXISTE

O post já falou que os valores mudam no redimensionamento, mas como capturar isso na hora?

É só escutar o evento resize da window

window.addEventListener(‘resize’, function() { var largura = window.innerWidth; var altura = window.innerHeight; console.log(largura, altura); });

Toda vez que o usuário arrastar a borda da janela, essa função dispara de novo com os valores atualizados

Muito útil pra ajustar layout responsivo ou recalcular alguma coisa na tela

Antes de seguir, vale bater o martelo sobre a diferença, porque é aqui que todo mundo se confunde

window.screen: o monitor físico inteiro, não muda se tu diminui a janela

window.innerWidth / innerHeight: só a área útil da aba do navegador (viewport), muda ao redimensionar

document.documentElement.scrollHeight: o conteúdo completo da página, incluindo o que está fora da tela no scroll

Escolhe conforme o que tu precisa medir