Funções CSS de jQuery para saber o tamanho e a posição de elementos

Seguimos vendo funções CSS do framework Javascript jQuery, neste caso as que servem para conhecer o tamanho e posição dos elementos na página.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 17/5/11
Valorize este artigo:
Entre as classificações de funções jQuery que existem, diversas servem para controlar os atributos de CSS dos elementos da página, seja para acessar os valores atuais dos atributos CSS ou para alterá-los. Em artigos anteriores do Manual de jQuery pudemos conhecer várias destas funções, por exemplo no artigo de Adicionar e retirar classes CSS sobre elementos.

Neste artigo vamos ver outras das funções que jQuery coloca à nossa disposição para acessar à posição dos elementos na página e suas dimensões. Estas funções, embora seja melhor chamar-lhes métodos (já que pertencem ao objeto jQuery), são meramente informativas, para saber onde estão posicionados os elementos dentro do documento e suas medidas internas e externas. Veremos isso com detalhes em breve, porém antes quero salientar para aqueles distraídos que se queremos alterar as propriedades CSS de um elemento da página com jQuery, devemos lembrar que está disponível o método css(), que vimos anteriormente em repetidas ocasiões ao longo deste manual, enviando-lhe como primeiro parâmetro o nome do atributo CSS a ser alterado e como segundo parâmetro o valor do mesmo.

Agora, vou dar uma lista dos novos métodos que vamos ver neste artigo, começando pelos que servem para conhecer as dimensões de um elemento.

Métodos innerWidth() e innerHeight():
Recebem um objeto jQuery e retornam as dimensões internas do primeiro elemento que haja em tal objeto jQuery, isto é, a largura e altura respectivamente do elemento contando o padding do elemento mas não a borda.

Métodos outerWidth() e outerHeight():
Recebem um objeto jQuery e retornam as dimensões externas do primeiro elemento de dito objeto jQuery recebido por parâmetro, isto é, a largura e altura respectivamente do elemento contando o padding do elemento e sua borda.

Nota: Como poderemos imaginar, se um elemento não tem borda os valores de innerWidth e outerWidth serão exatamente os mesmos, assim como os valores de innerHeight e outerHeight.

Métodos offset() e position():
Ambos métodos retornam a posição de um elemento na página. Recebem um objeto jQuery e retornam a localização do primeiro elemento que haja nesse objeto jQuery. A posição sempre é indicada como valor de retorno do método por meio de um objeto que tem dois atributos, "top" e "left", indicando os píxels que está separado do canto superior esquerdo do documento. A diferença entre estes dois métodos é que offset() indica a posição do elemento real, tendo em conta as margens do elemento, o que costuma ser mais útil. Por sua parte, position() indica a posição onde teria sido posicionado o elemento se não tivesse margens, o que frequentemente não é a posição real.

Nota: Para acessar os valores top e left do objeto de retorno podemos fazer algo assim:
posiçãoReal = $("#idelemento").offset();
alert(posiçãoReal.top);
alert(posiçãoReal.left);

Função que mostra as dimensões de um elemento

Por fazer uns testes com estes métodos, vamos começar criando uma função que mostra em uma caixa de alerta as dimensões de um elemento cujo seletor seja enviado por parâmetro. À função enviaremos o seletor e depois com jQuery mostraremos seus valores de largura e altura, tanto da parte interior do elemento (innerWidth e innerHeight), quanto do elemento completo com sua borda (outerWidth e outerHeight).

function dimensãoCamada(camada){
camada = $(camada);
var dimensoes = "";
dimensoes += "Dimensoes internas: " + camada.innerWidth() + "x" + camada.innerHeight();
dimensoes += "nDimensoes externas: " + camada.outerWidth() + "x" + camada.outerHeight();
alert(dimensoes);
}

Como dizíamos, as dimensões externas consideram a borda do elemento, caso tenha, e as dimensões internas não levam em conta a possível borda.

Função para mostrar a posição de um elemento

Agora vamos fazer uma função similar à anterior para mostrar um exemplo de uso das funções position() e offset(). Esta função recebe um seletor e mostra a localização deste elemento, tal como a retornam os métodos position() e offset().

function posiçãoCamada(camada){
camada = $(camada);
var posição = "";
posição += "Posição relativa ao documento:nLEFT: " + camada.offset().left + "nTOP:" + camada.offset().top;
posição += "nnPosição se não tivesse margem:nLEFT: " + camada.position().left + "nTOP:" + camada.position().top;
alert(posição);
}

Se invocamos esta função sobre um elemento qualquer que não tenha margem, as duas posições retornadas por position() e offset() serão as mesmas. Porém, se aplicamos uma margem a esse elemento, o elemento mudará de lugar na página e então o valor de offset() também mudará, mas não o de position().

Exemplo completo sobre os métodos de dimensões e posição de elementos

As duas funções anteriores podem ser vistas em funcionamento em um exemplo que criamos para poder explicar melhor todos os métodos comentados neste artigo de CriarWeb.com.

No exemplo simplesmente se realizam as ações para averiguar as posições e dimensões de dois elementos da página. Além disso, temos dois botões para alterar o CSS dos elementos dinamicamente e assim voltar a ver suas posições e dimensões e comprovar como mudaram.

Realmente não serve de muito o exemplo, mas pelo menos esperamos que resulte bastante didático. Podemos vê-lo em funcionamento em uma página à parte.

Agora, o código deste exemplo que não deve resultar muito complicado se seguimos o manual de jQuery até este ponto.

<html>
<head>
<title>Funcoes CSS em jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script type="application/x-javascript">
function dimensaoCamada(camada){
camada = $(camada);
var dimensoes = "";
dimensoes += "Dimensoes internas: " + camada.innerWidth() + "x" + camada.innerHeight();
dimensoes += "nDimensoes externas: " + camada.outerWidth() + "x" + camada.outerHeight();
alert(dimensoes);
}
function posiçãoCamada(camada){
camada = $(camada);
var posiçao = "";
posiçao += "Posiçao relativa ao documento:nLEFT: " + camada.offset().left + "nTOP:" + camada.offset().top;
posiçao += "nnPosiçao se não tivesse margem:nLEFT: " + camada.position().left + "nTOP:" + camada.position().top;
alert(posiçao);
}
$(document).ready(function(){
$("#botaodimensoes").click(function(){
dimensaoCamada("#camada1");
});
$("#botaoposiçao").click(function(){
posiçaoCamada("#camada1");
});
$("#botaotamanho").click(function(){
$("#camada1").css("width", 200);
});
$("#botaomargem").click(function(){
$("#camada1").css("margin", 20);
});
$("#botaodimensoesc2").click(function(){
dimensaoCamada("#camada2");
});
$("#botaoposiçaoc2").click(function(){
posiçaoCamada("#camada2");
});

});

</script>

</head>
<body>
<h1>Funçoes CSS em jQuery de dimensões e posição</h1>
<p>Testando funções de localização de elementos na página...</p>
<div id="camada1" style="padding: 24px; background-color: #ffccdd; float: left; border: 2px dotted #666;">
<h2>camada1:</h2>
Vou criar esta camada para ver quanto mede e onde está posicionada.
</div>
<br style="clear: both;">
<div style="margin: 10px;">
<button id="botaodimensoes" type="button">Dimensoes de camada1</button>
<button id="botaoposiçao" type="button">Posiçao de camada1</button>
<button id="botaotamanho" type="button">Mudar tamanho camada1</button>
<button id="botaomargem" type="button">Mudar margem camada1</button>
</div>

<div style="margin: 10px;">
<button id="botaodimensoesc2" type="button">Dimensoes de camada2</button>
<button id="botaoposiçaoc2" type="button">Posiçao de camada2</button>
</div>

<br>
Desloca a página para baixo para ver a camada2...
<br>
<br>
...
<br>
<div id="camada2" style="background-color:#ccc; border-bottom: 5px solid #999; margin-left: 10px;">
Esta camada está muito para baixo!!
</div>
</body>
</html>

Para terminar, podemos ver este script funcionando em uma página à parte.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato