diff options
Diffstat (limited to 'files/uk/web/api/element/getclientrects/index.html')
| -rw-r--r-- | files/uk/web/api/element/getclientrects/index.html | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/files/uk/web/api/element/getclientrects/index.html b/files/uk/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..5a88f0321c --- /dev/null +++ b/files/uk/web/api/element/getclientrects/index.html @@ -0,0 +1,219 @@ +--- +title: Element.getClientRects() +slug: Web/API/Element/getClientRects +translation_of: Web/API/Element/getClientRects +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>getClientRects()</strong></code> метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS border box</a> в клієнта.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>let <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання <code>left</code>, <code>top</code>, <code>right</code> <code>і bottom</code> властивості, які описують border box, в пікселях, з top-left відносно до top-left видимої області веб-сторінки. For tables with captions, the caption is included even though it's outside the border box of the table. When called on SVG elements other than an outer-<code><svg></code>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<code><svg></code> establishes (and to be clear, the rectangles are also transformed by the outer-<code><svg></code>'s <code>viewBox</code> transform, if any).</p> + +<p>Originally, Microsoft intended this method to return a <code>TextRectangle</code> object for each <em>line</em> of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each <em>border box</em>. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.</p> + +<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds <code>width</code> and <code>height</code> properties to the <code>TextRectangle</code> object.")}}</p> + +<p>The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.</p> + +<p>The returned rectangles do not include the bounds of any child elements that might happen to overflow.</p> + +<p>For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, <code>display:none</code> elements, and generally any elements that are not directly rendered, an empty list is returned.</p> + +<p>Rectangles are returned even for CSS boxes that have empty border-boxes. The <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code> coordinates can still be meaningful.</p> + +<p>Fractional pixel offsets are possible.</p> + +<h2 id="Examples">Examples</h2> + +<p>These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class <code>withClientRectsOverlay</code>.</p> + +<h3 id="HTML">HTML</h3> + +<p>Example 1: This HTML creates three paragraphs with a <code><span></code> inside, each embedded in a <code><div></code> block. Client rects are painted for the paragraph in the second block, and for the <code><span></code> element in the third block.</p> + +<pre class="brush: html"><h3>A paragraph with a span inside</h3> +<p>Both the span and the paragraph have a border set. The + client rects are in red. Note that the p has onlyone border + box, while the span has multiple border boxes.</p> + +<div> + <strong>Original</strong> + <p> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>p's rect</strong> + <p class="withClientRectsOverlay"> + <span>Paragraph that spans multiple lines</span> + </p> +</div> + +<div> + <strong>span's rect</strong> + <p> + <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span> + </p> +</div></pre> + +<p>Example 2: This HTML creates three ordered lists. Client rects are painted for the <code><ol></code> in the second block, and for each <code><li></code> element in the third block.</p> + +<pre class="brush: html"><h3>A list</h3> +<p>Note that the border box doesn't include the number, so + neither do the client rects.</p> + +<div> + <strong>Original</strong> + <ol> + <li>Item 1</li> + <li>Item 2</li> + </ol> +</div> + +<div> + <strong>ol's rect</strong> + <ol class="withClientRectsOverlay"> + <li>Item 1</li> + <li>Item 2</li> + </ol> +</div> + +<div> + <strong>each li's rect</strong> + <ol> + <li class="withClientRectsOverlay">Item 1</li> + <li class="withClientRectsOverlay">Item 2</li> + </ol> +</div></pre> + +<p>Example 3: This HTML creates two tables with captions. Client rects are painted for the <code><table></code> in the second block.</p> + +<pre class="brush: html"><h3>A table with a caption</h3> +<p>Although the table's border box doesn't include the + caption, the client rects do include the caption.</p> + +<div> + <strong>Original</strong> + <table> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div> + +<div> + <strong>table's rect</strong> + <table class="withClientRectsOverlay"> + <caption>caption</caption> + <thead> + <tr><th>thead</th></tr> + </thead> + <tbody> + <tr><td>tbody</td></tr> + </tbody> + </table> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<p>The CSS draws borders around the paragraph and the <code><span></code> inside each <code><div></code> block for the first example, around the <code><ol></code> and <code>li</code> for the second example, and around <code><table></code>, <code><th></code>, and <code><td></code> elements for the third example.</p> + +<pre class="brush: css">strong { + text-align: center; +} +div { + display: inline-block; + width: 150px; +} +div p, ol, table { + border: 1px solid blue; +} +span, li, th, td { + border: 1px solid green; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>The JavaScript code draws the client rects for all HTML elements that have CSS class <code>withClientRectsOverlay</code> assigned.</p> + +<pre class="brush: js">function addClientRectsOverlay(elt) { + /* Absolutely position a div over each client rect so that its border width + is the same as the rectangle's width. + Note: the overlays will be out of place if the user resizes or zooms. */ + var rects = elt.getClientRects(); + for (var i = 0; i != rects.length; i++) { + var rect = rects[i]; + var tableRectDiv = document.createElement('div'); + tableRectDiv.style.position = 'absolute'; + tableRectDiv.style.border = '1px solid red'; + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; + tableRectDiv.style.margin = tableRectDiv.style.padding = '0'; + tableRectDiv.style.top = (rect.top + scrollTop) + 'px'; + tableRectDiv.style.left = (rect.left + scrollLeft) + 'px'; + // We want rect.width to be the border width, so content width is 2px less. + tableRectDiv.style.width = (rect.width - 2) + 'px'; + tableRectDiv.style.height = (rect.height - 2) + 'px'; + document.body.appendChild(tableRectDiv); + } +} + +(function() { + /* Call function addClientRectsOverlay(elt) for all elements with + assigned class "withClientRectsOverlay" */ + var elt = document.getElementsByClassName('withClientRectsOverlay'); + for (var i = 0; i < elt.length; i++) { + addClientRectsOverlay(elt[i]); + } +})();</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples', 680, 650)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h3 id="Notes">Notes</h3> + +<p><code>getClientRects()</code> was first introduced in the MS IE DHTML object model.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.getClientRects")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li> + <li>{{DOMxRef("Element.getClientRects()")}}</li> +</ul> |