A altura e a largura são as dimensões mais consideráveis ao projetar o layout de uma página da web.
A “altura” indica a medida do comprimento de um objeto de cima para baixo, enquanto a “largura” indica a largura de um objeto de um lado ao outro. Esses fatores auxiliam no ajuste da alocação de um objeto na janela. Em JavaScript, o “ altura ' e ' largura ” são ainda classificadas em duas categorias “internas”, ou seja, “innerHeight/innerWidth” e “externas”, ou seja, “outerHeight/outerWidth”, respectivamente.
Este artigo detalha o objetivo e o funcionamento da propriedade Window “innerHeight” em JavaScript.
O que a propriedade Window “innerHeight” faz em JavaScript?
O ' alturainterna ” está associada ao objeto “window” que recupera a altura da viewport da janela do navegador, excluindo a barra de localização, barra de ferramentas, barra de menu e outros. Além disso, inclui a altura da barra de rolagem horizontal, se estiver incluída. O valor retornado desta propriedade é retirado da janela “layout viewport”, ou seja, uma área que exibe o conteúdo da página da web.
Sintaxe Básica
window.innerHeight OU innerHeight
De acordo com a sintaxe acima, o “ alturainterna ” pode ser facilmente aplicada diretamente ou usando o objeto “window”.
Vamos implementar a propriedade acima definida de forma prática com a ajuda de sua sintaxe básica.
Exemplo 1: Aplicando a propriedade “innerHeight” da janela para retornar a altura da viewport da janela do navegador
Este exemplo utiliza a propriedade “innerHeight” com o objeto “window” para recuperar a altura da viewport da janela do navegador.
Código HTML
Primeiro, dê uma olhada no código abaixo indicado:
< h2 > Janela propriedade innerHeight h2 >< botão ao clicar = 'jsFunc()' > obter altura botão >
< p eu ia = 'para' > p >
Nas linhas de código acima:
- O ' ” define o subtítulo de nível 2.
- O '
” representa o botão com um evento “onclick” para invocar a função “jsFunc()” quando o evento é acionado. - O ' ” adiciona um parágrafo vazio com um id atribuído “para” para exibir o valor retornado da propriedade “innerHeight” aplicada.
Código JavaScript
Agora, prossiga com o código abaixo:
< roteiro >função jsFunc ( ) {
deixar h = window.innerHeight;
document.getElementById ( 'para' ) .innerHTML = 'Altura interna da janela: ' + h;
}
roteiro >
Nas linhas de código acima:
- Primeiramente, defina uma função chamada “ jsFunc() ”.
- Na sua definição, a variável “h” aplica o “ alturainterna ” usando o objeto “janela”.
- Depois disso, aplique o “ getElementById() ” para obter o parágrafo vazio adicionado usando seu id “para” e exibir a altura interna da janela do navegador atual nele.
Saída
Conforme mostrado na saída acima, a janela do navegador atual exibe a altura da viewport (altura interna), ou seja, “ 599px ” ao clicar no botão.
Exemplo 2: Aplicando as propriedades “innerHeight” e “innerWidth” da janela combinada
A propriedade “innerHeight” pode ser implementada juntamente com as outras propriedades de dimensões, como “innerWidth”, “outerWidth”, “outerHeight” etc. Neste cenário, ela é usada juntamente com a propriedade “ largurainterna ' propriedade.
Código HTML
Vamos ter uma visão geral do código HTML modificado:
< h2 > Propriedades innerHeight e innerWidth da janela h2 >< botão ao clicar = 'jsFunc()' > Obter Altura e Largura botão >
< p eu ia = 'para' > p >
Aqui, o conteúdo dos elementos “