Top view là gì

 - 

The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element và its position relative khổng lồ the viewport.

Bạn đang xem: Top view là gì


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

*

The width và height properties of theDOMRect object returned by the method include the padding và border-width, not only the nội dung width/height. In the standard box model, this would be equal khổng lồ thewidth or height property of the element + padding+border-width. But ifbox-sizing: border-box is phối for the element this would be directly equal khổng lồ 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 & 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 into tài khoản 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 sầu lớn the viewport & not absolute).

Xem thêm: Việt Namgiải Thích Clienttransferprohibited Là Gì ? Clienttransferprohibited Là Gì

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


Cross-browser fallback


Scripts requiring high cross-browser compatibility can use window.pageXOffphối và window.pageYOffmix instead of window.scrollX và window.scrollY. Scripts without access to lớn 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 toàn thân.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, và prints out its properties below it.


div>div>

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

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

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

Xem thêm: 2001 Mệnh Gì, Tuổi Gì, Hợp Màu Gì, Hợp Tuổi Nào, Hướng Nào? Sinh Năm 2001 Mệnh Gì, Hợp Màu Sắc Hay Tuổi Nào


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