Rodrigo Brito

Obtendo dimensões e distâncias de elementos do DOM

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

A primeira forma para obter as dimensões e distâncias em pixels de elementos do DOM é utilizando Height e Width, que são propriedades e métodos dos objetos Element e HTMLElement, sendo, na sua maioria, Read Only. Ex:

const section = document.querySelector('.skills');

section.clientHeight; // retorna height + padding
section.offsetHeight; // retorna height + padding + border
section.scrollHeight; // retorna height total, mesmo dentro de scroll

Para o obter os valores relacionados com width são utilizadas as mesmas propriedades substituindo "Height" por "Width".

Para obter a distância entre o topo da página e o topo do elemento é utilizado a propriedade offseTop e para obter as referências horizontais é utilizada a propriedadeoffsetLeft. Não á propriedade para obter a partir do final ou direita da página, pois as coordenadas iniciais do elemento Window é o canto superior esquerdo da página. Ex:

const section = document.querySelector('.skills');

section.offsetTop; // retorna a diistância entre o topo do elemento e o topo da página
section.offsetLeft; // retorna a distância entre o canto esquerdo do elemento e o canto esquerdo da página

O método getBoundingClientRect()pode ser utilizado para obter um objeto contendo um conjunto de valores referentes as medidas e distâncias de um elemento, tais como width, height, distâncias do elemento dentre outros. Ex:

const section = document.querySelector('.animais');

section.getBoundingClientRect(); // retorna um objeto, com diversas propriedades e métodos que podem ser acessadas para obtenção de valores
section.getBoundingClientRect().bottom; // retorna a distância entre a altura do elemento e o final da página

Para obter valores da janela da página, window, são utilizadas as seguintes propriedades:

window.innerWidth; // largura da janela ocupada pela página
window.outerWidth; // largura total da janela, caso haja algum recurso dividindo a página com o browser, tal como o dev tools
window.innerHeight; // altura da janela ocupada pela página
window.outerHeight; // altura total da janela, incluindo barra de navegação

window.pageYOffset; // distância total do scroll vertical
window.pageXOffset; // distância total do scroll horizontal

Outro método que pode ser utilizado para verificar o tamanho da tela é o matchMedia() de window e é muito utilizado para condicionais. O valor passado é semelhante ao utilizado para definição de Media Query em CSS, Caso o navegador esteja dentro deste valor é retornado true, caso contrário false.Ex:

window.matchMedia('(max-width: 700px)'); // retorna false no caso da janela ter largura superior ao máximo de 700px;
window.matchMedia('(max-width: 3700px)'); // retorna true no caso da janela ter largura superior ao máximo de 3700px;