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.