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