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
Boa noite Matheus,
Tentei utilizar esse script em meu código para obter o tamanho da tela quando é redimensionada, mas não funciona, apenas pega o valor inicial.