Layout Properties And Methods In Element, HTMLElement And Window

Inheritance Graph

EventTarget <- Node <- Element <- HTMLElement

Layout Properties And Methods In Element

Element.clientTop: read-only property returns the width of the top border of an element in pixels.
Element.clientLeft: read-only property returns the width of the left border of an element in pixels.
Elment.clientHeight: read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin. ClientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present). Otherwise it will return zero if the element has no CSS or inline layout boxes. If the content is overflow and the scrollbar presents, clientHeight will be the height of the visible content.
Element.clientWidth: similar to clientHeight, but it represent the inner width of the element.
Element.scrollTop: the property gets or sets the number of pixels that an element’s content is scrolled vertically. An element’s scrollTop value is a measurement of the distance from the element’s top to its topmost visible content. When an element’s content does not generate a vertical scrollbar, then its scrollTop value is 0. scrollTop can be set to any integer value, with certain caveats: First, if the element can’t be scrolled (e.g. it has no overflow or if the element has a property of “non-scrollable”), scrollTop is 0. Second, scrollTop doesn’t respond to negative values; instead, it sets itself back to 0. Third, if set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.
Element.scrollLeft: similar to scrollTop, but it represent the number of pixels of the element scrolled to the left.
Element.scrollHeight: read-only property returns the height of an element’s content, including content not visible on the screen due to overflow. If the element’s content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight.
Element.scrollWidth: similar to scrollHeight.
Element.getClientRects(): returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.
Element.getBoundingClientRect(): returns the size of an element and its position relative to the viewport. The returned value is a DOMRect object.
DOMRect is an object containing top, left, right, bottom, x (not supported by IE), y (not supported by IE), width (supported by IE 9+), height (supported by IE 9+) properties. top, left, right and bottom properties are the distances relative to the top-left corner of the viewport. height and width are almost equal to HTMLElement.offsetHeight and HTMLElement.offsetWidth..

Layout Properties In HTMLElement

HTMLElement.offsetParent: read-only property returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. Returns null when the element has style.display set to “none”. The offsetParent is useful because offsetTop and offsetLeft are relative to its padding edge.
HTMLElement.offsetTop: read-only property returns the distance of the current element relative to the top of the offsetParent node.
HTMLElement.offsetLeft: read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
HTMLElement.offsetHeight: read-only property is the height of the element including vertical padding and borders, as an integer.
HTMLElement.offsetWidth: read-only property returns the layout width of an element. Typically, an element’s offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width. If the element is hidden (for example, by style.display on the element or one of its ancestors to “none”), then 0 is returned.

Layout Properties And Methods In window

window.scrollY(window.pageYOffset): returns the number of pixels that the document is currently scrolled vertically.
window.scrollX(window.pageXOffset): returns the number of pixels that the document is currently scrolled horizontally.
window.scrollTo(x, y)(window.scroll(x, y): scrolls to a particular set of coordinates in the document.
window.scrollBy(offsetX, offsetY): scrolls the document in the window by the given amount.