Creates an instance of rect.
// Rect of an HTMLElement.
const rectA = new Rect( document.body );
// Rect of a DOM Range.
const rectB = new Rect( document.getSelection().getRangeAt( 0 ) );
// Rect of a window (web browser viewport).
const rectC = new Rect( window );
// Rect out of an object.
const rectD = new Rect( { top: 0, right: 10, bottom: 10, left: 0, width: 10, height: 10 } );
// Rect out of another Rect instance.
const rectE = new Rect( rectD );
// Rect out of a ClientRect.
const rectF = new Rect( document.body.getClientRects().item( 0 ) );
Note: By default a rect of an HTML element includes its CSS borders and scrollbars (if any)
ant the rect of a window includes scrollbars too. Use #excludeScrollbarsAndBorders
to get the inner part of the rect.
A source object to create the rect.
ReadonlybottomThe "bottom" value of the rect.
ReadonlyheightThe "height" value of the rect.
ReadonlyleftThe "left" value of the rect.
ReadonlyrightThe "right" value of the rect.
ReadonlytopThe "top" value of the rect.
ReadonlywidthThe "width" value of the rect.
Checks whether a rect fully contains another rect instance.
true if contains, false otherwise.
Excludes scrollbars and CSS borders from the rect.
window.A rect which has been updated.
Returns the area of the rect.
Returns the area of intersection with another rect.
Area of intersection.
Returns a new rect, a part of the original rect, which is actually visible to the user and is relative to the,body,
e.g. an original rect cropped by parent element rects which have overflow set in CSS
other than "visible".
If there's no such visible rect, which is when the rect is limited by one or many of
the ancestors, null is returned.
Note: This method does not consider the boundaries of the viewport (window). To get a rect cropped by all ancestors and the viewport, use an intersection such as:
const visibleInViewportRect = new Rect( window ).getIntersection( new Rect( source ).getVisible() );
A visible rect instance or null, if there's none.
Checks if all property values (#top, #left, #right, #bottom, #width and #height) are the equal in both rect instances.
A rect instance to compare with.
true when Rects are equal. false otherwise.
Moves the rect in–place by a dedicated offset.
A horizontal offset.
A vertical offset
A rect which has been moved.
Moves the rect so that its upper–left corner lands in desired [ x, y ] location.
Desired horizontal location.
Desired vertical location.
A rect which has been moved.
Recalculates screen coordinates to coordinates relative to the positioned ancestor offset.
StaticgetStaticget
A helper class representing a
ClientRectobject, e.g. value returned by the nativeobject.getBoundingClientRect()method. Provides a set of methods to manipulate the rect and compare it against other rect instances.