Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

segunda-feira, 20 de agosto de 2007

Como achar um elemento na pagina

Vamos lá que o tempo ruge e a sapucaí é grande. Hoje vamos aprender como se pega a verdadeira posição de um elemento na página. Sabemos que existem as propriedades top, left que teoricamente permite-nos sabermos onde ele se localiza, mas engano nosso, poistop, left referenciam apenas a posição em relação ao seu pai e mesmo assim temos dois problemas:


  • É obrigatório a declaração do top e left, porque senão vem como vazio as propriedades.

  • Nem sempre o que declaramos no top e left, e a posição "real" dele em relação ao seu pai.



Portanto, vemos que as propriedades top e left, não serão de muita serventia, para nossa salvação existem as propriedades offsetTop, offsetLeft as quais de certa forma nos oferece a posição correta do elemento, logo resolvemos metade do problema, pois essas propriedades oferecem as coordenadas em relação ao seu offsetParent (em cada browser o offsetParent é tratado de forma diferente, dessa vez não é só o IEca que dá problemas), mas ainda sim isso não é um grande problema, pois as propriedades são sempre relativas à seus offsetParent, independente de qual for. Com todas essas informações, já podemos resolver o problema, pois sabemos que o offset nos traz a posição "real" do elemento e é relativo à seu offsetParent, logo precisaremos apenas, percorrer todos os offsetParent deste elemento somando os offsetTop e offsetLeft e voilá.

Code:

function pegarPosicao(obj){
var left = 0;
var top = 0;

while (obj.offsetParent){
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent;
}

left += obj.offsetLeft;
top += obj.offsetTop;

return {x:left, y:top};
}


No código acima, pego por parâmetro um objeto qualquer, zero as variáveis que irão ser responsáveis por ter o top e left do objeto, entro no laço de repetição e repito até o objeto não ter offsetParent (podemos entender isso como pai, mas nem sempre ,pra falar q verdade quase nunca, o offsetParent é o "pai" do elemento) e na repetição, somo as propriedades que vão me dar a posição do elemento e o elemento recebe o offsetParent dele. Depois de sair do laço ainda vai ter faltado mais uma repetição, pois o último elemento não tem offsetParent, mas pode ter offsetTop e offsetLeft, então somo esse valor às variáveis e retorno o valor real dele na página.

Obs: Vale lembrar que as propriedades offset, não podem ser setadas, apenas lidas.

Espero que tenham gostado.

Fuiii...

3 Comentários:

Blogger Matioli disse...

Legal, não conhecia o offsetParent, mas já usei o offsetLeft e Top, acho que tive sorte, pois sempre deu a posição correta...

Mas tenho uma dúvida, olhando se código, não entendi porque usou o objeto "e" ao invés de "obj", ficaria no final:
left += obj.offsetLeft;
top += obj.offsetTop;

ao invés de:
left += e.offsetLeft;
top += e.offsetTop;

Valew pela atenção,
Matheus de Oliveira (matioli.matheus [arroba] hotmail.com)

12 de setembro de 2007 12:35  
Blogger Micox - Náiron J. C. G. disse...

hehe, acabei de usar seu ótimo script. :)

2 de abril de 2008 11:48  
Blogger ramon disse...

Muito Bom!!!

2 de abril de 2008 20:09  

Postar um comentário

Assinar Postar comentários [Atom]

<< Página inicial