Dimensionando elementos com jQuery

É muito comum, no desenvolvimento de websites, surgir a necessidade de se obter e alterar os valores referentes às dimensões dos elementos na página. Graças a biblioteca jQuery, esta se tornou uma tarefa bastante simples e estes valores podem ser acessados diretamente através de funções de fácil compreensão e utilização.

Veremos aqui as funções para obter e alterar os valores relativos a altura e largura dos elementos, no caso, divs.

Utilizaremos a seguinte estrutura HTML para os exemplos abordados neste artigo:

Listagem 1: Estrutura HTML utilizada nos exemplos

<div id="divExterna">
	<div id="divInterna"></div>
</div>

Para complementar o código HTML, aplicaremos uma folha de estilo simples, conforme mostra a Listagem 2.

Listagem 2: Folha de estilos utilizada nos exemplos

div{
	border:solid 1px
}

#divExterna{
	width:200px;
	height:200px;
	padding:10px
}

#divInterna{
	width:100%;
	height:100%;
	padding:1px
}

A seguir veremos vários trechos de código Javascript utilizando a sintaxe jQuery. A forma como este código será inserido na página, se no clique de um botão ou no carregamento da página, por exemplo, fica a critério do leitor. Vejamos então as funções que são foco deste artigo.

height

Utilizada para obter e alterar a altura de um elemento. O código da Listagem 3 exibe uma mensagem com a altura da div interna e, logo após, altera este valor para 50px.

Listagem 3: Exemplos de uso da função height

alert($("#divInterna").height());
$("#divInterna").height(50);

A mensagem exibida deve conter o valor “200”, pois foi definida que a div interna deveria ter cem por cento da altura da div externa. A função height não desconta os valores de borda ou margem.

innerHeight

Esta função é semelhante a anterior, não pode ser usada para alterar, mas apenas para obter a altura interna do elemento, incluindo o valor do padding. No caso da div interna, ela possui 200px de altura e o padding de 1px, logo, somam-se 2px à altura interna, como é possível constatar com o código da Listagem 4.

Listagem 4: Exemplo de uso da função innerHeight

alert($("#divInterna").innerHeight());

O resultado deve ser “202” (200px da altura somados a 1px do padding superior mais 1px do padding inferior).

outerHeight

Também não pode ser usada para alterar, mas para obter o valor da altura total do elemento, incluindo margem, borda e padding. A Listagem 5 mostra um exemplo de uso desta função, tomando como alvo a div interna. O resultado exibido deve ser o valor “204” (200px da altura mais 2px do padding superior e interior, somados a 2px da borda superior e inferior).

Listagem 5: Exemplo de uso da função outerHeight

alert($("#divInterna").outerHeight());

width

Como do próprio nome já se pode imaginar, esta função permite obter e alterar a largura do elemento. Na Listagem 6, a largura da div interna é exibida em uma caixa de diálogo e, após isso, este valor é alterado para 50px.

Listagem 6: Exemplos de uso da função width

alert($("#divInterna").width());
$("#divInterna").width(50);

Novamente o valor exibido deve ser “200”, pois a função width não desconta os valores de padding e border.

innerWidth

Esta função é semelhante a innerHeight já explicada anteriormente, porém, o valor exibido é o da largura. Temos um exemplo de uso na Listagem 7 a seguir:

Listagem 7: Exemplo de uso da função innerWidth

alert($("#divInterna").innerWidth());

Também neste caso o valor exibido deve ser “202”, pelos mesmos motivos explicados para a função innerHeight.

outerWidth

A função outerWidth também segue a mesma lógica de funcionamento da outerHeight previamente explicada, porém, tratando a largura e não a altura. Testando o código da Listagem 8, o valor “204” deve ser novamente exibido em uma caixa de diálogo.

Listagem 8: Exemplo de uso da função outerWidth

alert($("#divInterna").outerWidth());

Uma outra forma de se obter ou alterar os valores da altura ou largura absoltas de um elemento, seria utilizando a função css() desta mesma biblioteca, porém, a diferença está na forma como o valor é obtido e definido. Utilizando as funções height() e width(), utiliza-se valores escalares, ou seja, sem unidade (fica implícito que a unidade usada é o pixel). Já a função css() trabalha com valores cuja unidade deve estar explícita, por exemplo, o píxel. A Listagem 9 exibe um trecho de código que apresenta usos equivalentes destas funções.

Listagem 9: Comparação entre as funções css, height e width

alert($("#divInterna").css("height"));
//equivalente a
alert($("#divInterna").height());
		
$("#divInterna").css("height", "50px");
//equivalente a
$("#divInterna").height(50);

alert($("#divInterna").css("width"));
//equivalente a
alert($("#divInterna").width());

$("#divInterna").css("width", "50px");
//equivalente a
$("#divInterna").width(50);

O uso das funções height e width no lugar da css é aconselhado quando se pretende realizar cálculos matemáticos com os valores.

Conclusão

Concluímos que a biblioteca jQuery nos permite trabalhar de forma simples com as dimensões dos elementos da página. Facilitando, assim, o desenvolvimento de soluções front-end cada vez mais complexas e agradáveis aos olhos dos usuários.

Finalizo aqui este artigo, grato pela atenção. Até a próxima.