Advanced Search

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

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.