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