Como Criar Sites | Aprenda grátis como fazer seu site » posição http://www.comocriarsites.com Aprenda a criar sites, html e manhas para fazer seu site. Wed, 06 Jan 2010 12:51:19 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Pegando Posição Absoluta de um Elemento HTML (Javascript) http://www.comocriarsites.com/javascript/pegando-posicao-absoluta-de-um-elemento-html-javascript/ http://www.comocriarsites.com/javascript/pegando-posicao-absoluta-de-um-elemento-html-javascript/#comments Mon, 02 Mar 2009 06:36:42 +0000 Raoni Novellino http://www.comocriarsites.com/?p=23 Uma maneira simples de saber qual a posição absoluta de um elemento HTML (posição onde o elemento está em relação a área de exibição de páginas do navegador), é usando um algorítimo em Javascript. Esse algorítimo pega a posição relativa do elemento, e depois a posição relativa do elemento pai (parent), depois do pai do pai e assim até um elemento não ter um elemento pai.

O algorítimo:

function findPosX(obj)
{
	var curleft = 0;
	if(obj.offsetParent)
		while(1)
		{
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.x)
		curleft += obj.x;

	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

São dois algorítimos, um para a posição horizontal (findPosX) e outro para a posição vertical (findPosY). Os dois recebem um atributo de nome obj que é o objeto do elemento que você quer saber a posição e retornam um inteiro, que é a posição do elemento no documento HTML.

As funções do Javascript offsetLeft e offsetTop, retornam um inteiro que é a distântcia em pixels entre o elemento passado como paramatro e o elemento pai desse elemento passado comoparametro. A diferença entre as duas é que a primeira (offsetLeft), retorna a distância da esquerda entre o elemento e seu elemento pai, e a segunda (offsetTop), retorna a distância de cima entre o elemento e seu elemento pai.

Abaixo um exemplo de uso:

<html>
<head>
	<title>Teste de Posicionamento em Javascript</title>
</head>
<body>

<script language="JavaScript">

function findPosX(obj)
{
  var curleft = 0;
  if(obj.offsetParent)
      while(1)
      {
        curleft += obj.offsetLeft;
        if(!obj.offsetParent)
          break;
        obj = obj.offsetParent;
      }
  else if(obj.x)
      curleft += obj.x;
  return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

</script>

<table>
	<tr>
		<td>Linha 1</td>
	</tr>
	<tr>
		<td>Linha 2</td>
	</tr>
	<tr>
		<td>
		<table>
			<tr>
				<td id="td_posicao">Quero saber a posicao desse TD</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

<script language="JavaScript">

var td_pos_obj = document.getElementById('td_posicao');

var x = findPosX(td_pos_obj);
var y = findPosY(td_pos_obj);

alert('pos x: ' + x + ' - pos y: ' + y);

</script>

</body>
</html>

Algumas explicações:

A linha “var td_pos_obj = document.getElementById(’td_posicao’);” faz a variável td_pos_obj ficar identificando o elemento que e quero saber a posição. Pode ver que na tag <td> que eu quero saber a posição, tem um atributo id, com valor igual a td_posicao. Isso serve para eu identificar o elemento e depois poder saber qual ele é facilmente utilizando a função getElementById do Javascript. Essa função é boa porque funciona tanto no IE (acho que pelo menos no 6 e no 7) e no Firefox (testado na versao 2 e 3).

Se você quer saber a diferênça entre os valores do estilo (style) position, acesse: CSS Style Position: Diferença entre Relative, Absolute e Static

]]> http://www.comocriarsites.com/javascript/pegando-posicao-absoluta-de-um-elemento-html-javascript/feed/ 0