1 files changed, 98 insertions, 0 deletions
diff --git a/files/es/web/api/element/getboundingclientrect/index.html b/files/es/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..9d1b6ae4bb
--- /dev/null
+++ b/files/es/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,98 @@
+---
+title: element.getBoundingClientRect
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - Boundary
+  - Bounding
+  - Bounds
+  - CSSOM View
+  - Cliente
+  - DOM
+  - Elemento
+  - Minimo
+  - Referencia
+  - metodo
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>El método <code><strong>Element.getBoundingClientRect()</strong></code> devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (<em>viewport).</em></p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>El valor devuelto es un objeto {{domxref("DOMRect")}} que es la unión de los rectángulos devueltos por {{domxref("Element.getClientRects", "getClientRects()")}}para el elemento, es decir, las <em>CSS border-boxes</em> asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lectura <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> describiendo la <em>border-box</em> total en pixels. Excepto <code>width</code> and <code>height</code> las propiedades son relativas a la esquina superior izquierda (<em>top-left</em>) de la ventana.</p>
+
+<p style="display: block;"><img alt="Explicación de los valores DOMRect" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explicación de los valores DOMRect"></p>
+
+<p>Las <em>border-boxes</em> vacías son ignoradas. Si todas las <em>border-boxes</em> del elemento estan vacías, entonces se devuelve un rectángulo con <code>width</code> and <code>height</code> iguales a cero donde el <code>top</code> y el <code>left</code> son el top-left de la <em>border-box</em> de la primera <em>CSS box</em> (en onden de contenido) para el elemento.</p>
+
+<p>La cantidad de <em>scrolling</em> realizado en la ventana (o cualquier otro elemento <em>scrollable</em>) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (<code>top</code>, <code>left</code>, <code>bottom</code>, and <code>right</code>) cambián sus valores cada vez que la posición de <em>scrolling</em> cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el <em>bounding rectangle</em> relativo a la esquina <em>top-left</em> del documento, hay que añadir la posición de <em>scrolling</em> actual a las propiedades <code>top</code> and <code>left</code>  (dicha posición de <em>scrolling</em> puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el <em>bounding rectangle</em> independiente de la posición de <em>scrolling</em>.</p>
+
+<h3 id="Fallback_para_todos_los_navegadores">Fallback para todos los navegadores</h3>
+
+<p>Los scripts que requieran una alta compatibilidad <em>cross-browser</em> pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de <code>window.scrollX</code> y <code>window.scrollY.</code> Si no se tiene acceso a esas propiedades puede usarse el siguiente código:</p>
+
+<pre class="brush: js notranslate">// Para scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Para scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<pre class="brush:js notranslate">// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p>El objeto <code>DOMRect</code> devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían <code>DOMRectReadOnly</code> de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto <code>ClientRect</code> <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, devuelto impide rellenar los valores <code>x</code> e <code>y</code>.</p>
+
+<p>Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code>. </p>
+
+<p>Las propiedades en el objeto <code>DOMRect</code> devuelto no son suyas. Mientras que el operador <code>in</code> y <code>for...in</code> encontrarán las propiedades devueltas, otras API como <code>Object.keys()</code> fallarán. Además, e inesperadamente, ES2015 y nuevas características como <code>Object.assign()</code> y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.</p>
+
+<pre class="brush: js notranslate">rect = elt.getBoundingClientRect()
+// El resultado en emptyObj es {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+</pre>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, una versión anterior a <code>DOMRect</code> </li>
+</ul>