Posted By

remisemp on 09/10/08


Tagged


Versions (?)

función para obtener posición y dimensión de cualquier objeto HTML respecto al document


 / Published in: JavaScript
 

  1. método a través del cual se puede obtener la posición y las dimensiones de cualquier elemento html (div, table, img, etc.) que haya en el documento.
  2. Estas coordenadas son siempre relativas al documento, es decir, que si tenemos un div dentro de otro div y pedimos las coordenadas del div "hijo", obtendremos dichas coordenadas respecto al documento, y no respecto al div padre. Normalmente la gente se vuelve loca intentando obtener las coordenadas de la forma que estoy proponiendo ya que siempre las obtienen de la segunda forma, es decir, relativas al elemento padre, y entonces deben meterse en una serie de bucles para conseguir llegar al document. Bueno, pues esta es la solución:
  3.  
  4. La función irá en el propio documento o, como siempre aconsejo, en un js global que se incluirá en las páginas en las que lo necesitemos:
  5.  
  6. getDimensions = function(oElement) {
  7. var x, y, w, h;
  8. x = y = w = h = 0;
  9. if (document.getBoxObjectFor) { // Mozilla
  10. var oBox = document.getBoxObjectFor(oElement);
  11. x = oBox.x-1;
  12. w = oBox.width;
  13. y = oBox.y-1;
  14. h = oBox.height;
  15. }
  16. else if (oElement.getBoundingClientRect) { // IE
  17. var oRect = oElement.getBoundingClientRect();
  18. x = oRect.left-2;
  19. w = oElement.clientWidth;
  20. y = oRect.top-2;
  21. h = oElement.clientHeight;
  22. }
  23. return {x: x, y: y, w: w, h: h};
  24. }
  25.  
  26. En la página html:
  27.  
  28. Deberemos pasar a la función como parámetro el elemento del que queremos saber las coordenadas.
  29. Ejemplo para obtener las coordenadas en el documento de un div:
  30.  
  31. <div id="myDiv" style="position:absolute;top:190px;left:260px"></div>
  32.  
  33. var myDiv = document.getElementById('myDiv');
  34. var xDiv = getDimensions(myDiv).x;
  35. var yDiv = getDimensions(myDiv).y;
  36.  
  37. De esta forma la variable xDiv valdrá 260 y la variable yDiv valdrá 190, y son las coordenadas exactas de la posición del elemento en el documento.

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: total13 on October 28, 2009

Esta función acaba de salvarme un buen rato de trabajo, gracias!!!!

You need to login to post a comment.