diff options
Diffstat (limited to 'files/de/web/api/element/getboundingclientrect/index.html')
| -rw-r--r-- | files/de/web/api/element/getboundingclientrect/index.html | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..736314305d --- /dev/null +++ b/files/de/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,62 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +<div>{{APIRef("DOM")}}</div> + +<p>Die Methode <strong><code>Element.getBoundingClientRect()</code></strong> gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var domRect = <a href="/de/docs/Web/API/Element">element</a>.getBoundingClientRect(); +</pre> + +<h3 id="Returns" name="Returns">Rückgabe</h3> + +<p>Der zurückgegebene Wert ist ein <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect" title="nsIDOMClientRect">DOMRect</a> Objekt, welches die Vereinigungsmenge aller von <code><a href="/en-US/docs/DOM/element.getClientRects" title="DOM/element.getClientRects">getClientRects()</a></code> zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.</p> + +<p>Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften <code>left</code>, <code>top</code>, <code>right</code> ,<code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code> und <code>height</code>, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von <code>width</code> und <code>height</code>, sind realtiv zur linken oberen Ecke des Viewports.</p> + +<div class="note"> +<p><strong>Merke: </strong>{{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem <code>DOMRect</code> Objekt hinzu.</p> +</div> + +<p>Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die <code>top</code> und <code>left</code> Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für <code>top</code> und <code>left</code> zurückgegeben.</p> + +<p>Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo <code>top</code> und <code>left</code> den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.</p> + +<p>Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die <code>top</code> und <code>left</code> Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind <code><em>relativ</em> </code>zum <code>Viewport</code> und nicht absolut).</p> + +<p>Will man die Position des Rechtecks in Bezug auf die Linke/Obere Ecke des <code>Dokumentes </code>haben, was der <code><em>absoluten</em></code> Position des Rechteckes entspricht, muss man zu den <code>top</code> und <code>left</code> Positionen, die Werte von <code>window.scrollX</code> und<code> window.scrollY</code>, addieren.</p> + +<p>Um Browserkompabilität zu gewährleisten, nutzen Sie <code>window.pageXOffset</code> und <code>window.pageYOffset</code> statt<code> window.scrollY</code> und <code>window.scrollX</code>. Sollten <code style="font-style: normal;">window.pageXOffset</code>, <code style="font-style: normal;">window.pageYOffset</code>, <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollX and</span> <code style="font-style: normal;">window.</code><span style="font-family: consolas,monaco,andale mono,monospace;">scrollY undefined sein, nutzen Sie </span><code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft</code> and <code style="font-style: normal;">(((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop</code>.</p> + +<h2 id="Example" name="Example">Beispiel</h2> + +<pre class="brush:js">// rect is a DOMRect object with four properties: left, top, right, bottom +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{Compat("api.Element.getBoundingClientRect")}}</div> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/cssom-view/#the-getclientrects%28%29-and-getboundingclientrect%28%29-methods">CSSOM Views: The getClientRects() and getBoundingClientRect() methods </a></li> +</ul> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p><code>getBoundingClientRect()</code> wurde erstmals im DHTML Objektmodell von MS IE implementiert.</p> + +<p>Der Rückgabewert von <code>getBoundingClientRect() </code>ist <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">konstant</a>, es können keine weiteren Eigenschaften hinzugefügt werden.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li> + <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li> +</ul> |