É 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.
