Inner circle là gì

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the form size of an element & its position relative to lớn the viewport.

Bạn đang xem: Inner circle là gì


The returned value is a DOMRect object which is the smallest rectangle which contains the entire element, including its padding and border-width. The left, top, right, bottom, x, y, width, & height properties describe the position & kích thước of the overall rectangle in pixels. Properties other than width và height are relative sầu to the top-left of the viewport.

*

The width & height properties of theDOMRect object returned by the method include the padding and border-width, not only the nội dung width/height. In the standard box Mã Sản Phẩm, this would be equal khổng lồ thewidth or height property of the element + padding+border-width. But ifbox-sizing: border-box is set for the element this would be directly equal to itswidth or height.

The returned value can be thought of as the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

Empty border-boxes are completely ignored. If all the element"s border-boxes are empty, then a rectangle is returned with a width và height of zero and where the top và left are the top-left of the border-box for the first CSS box (in content order) for the element.

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken inkhổng lồ trương mục when computing the bounding rectangle. This means that the rectangle"s boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are relative lớn the viewport và not absolute).

If you need the bounding rectangle relative sầu to lớn the top-left corner of the document, just add the current scrolling position lớn the top và left properties (these can be obtained using window.scrollX và window.scrollY) khổng lồ get a bounding rectangle which is independent from the current scrolling position.


Cross-browser fallback


Scripts requiring high cross-browser compatibility can use window.pageXOffmix and window.pageYOffset instead of window.scrollX and window.scrollY. Scripts without access khổng lồ these properties can use code like this:

// For scrollX(((t = document.documentElement) || (t = document.toàn thân.parentNode)) &và typeof t.scrollLeft == "number" ? t : document.body).scrollLeft// For scrollY(((t = document.documentElement) || (t = document.body.parentNode)) &và typeof t.scrollTop == "number" ? t : document.body).scrollTop

Examples


Basic


This simple example retrieves the DOMRect object representing the bounding client rect of a simple
element, and prints out its properties below it.

Xem thêm: Ceo Nguyễn Minh Thảo Umbala

div>div>div width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple;let elem = document.querySelector("div");let rect = elem.getBoundingClientRect();for (var key in rect) if(typeof rect !== "function") let para = document.createElement("p"); para.textContent = `$ key : $ rect `; document.body toàn thân.appendChild(para);

Notice how the width/height are equal khổng lồ its width/height + padding.

Also note how the values of x/left, y/top, right, và bottom are equal to lớn the absolute distance from the relevant edge of the viewport to lớn that side of the element, in each case.

Scrolling

This example demonstrates how bounding client rect is changing when document is scrolled.

div>div>div#example width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple;body toàn thân padding-bottom: 1000px; p margin: 0; function update() const container = document.getElementById("controls"); const elem = document.querySelector("div"); const rect = elem.getBoundingClientRect(); container.innerHTML = ""; for (let key in rect) if(typeof rect !== "function") let para = document.createElement("p"); para.textContent = `$ key : $ rect `; container.appendChild(para); document.addEventListener("scroll", update);update();


Specifications


Specification Status Comment
CSS Object Model (CSSOM) View ModuleThe definition of "Element.getBoundingClientRect()" in that specification. Working Draft Initial definition

Notes


The returned DOMRect object can be modified in modern browsers. This was not true with older versions which effectively returned DOMRectReadOnly. With IE and Edge, not being able khổng lồ add missing properties lớn their returned ClientRect, object prevents backfilling x & y.

Due to compatibility problems (see below), it is safest lớn rely on only properties left, top, right, và bottom.

Properties in the returned DOMRect object are not own properties. While the in operator and for...in will find returned properties, other APIs such as Object.keys() will fail. Moreover, và unexpectedly, the ESnăm ngoái và newer features such as Object.assign() and object rest/spread will fail to lớn copy returned properties.

Xem thêm: Mobile Legends: Bang Bang Vng, Bang Bang: Tuổi Thơ Của Tôi Là Bang Bang Online

rect = elt.getBoundingClientRect()// The result in emptyObj is emptyObj = Object.assign(, rect)emptyObj = ...rect width, ...emptyObj = rectDOMRect properties top,left, right, và bottom are computed using the values of the object"s other properties.


Chuyên mục: Tin Tức