Placement and dimension related objects, properties and methods.
- Dimensions of the screen and the browser window
- Objects, properties and methods that can be used to retrieve the dimensions of a rendered element or document
- Properties that can be used to specify and retrieve the dimensions of an element
- Some element specific properties to set or retrieve the dimensions of an element
- Scrolling
- Some useful methods to get the element or the component of the element that is located at a position
Dimensions of the screen and the browser window:
Objects:
Properties:
Methods:
| Object | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| screen | Contains information about the dimensions of the screen and the display settings. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| availHeight (screen) |
Returns the height of the area on the screen that is available for application windows. | |||||||||||
| availLeft (screen) |
Returns the left side of the area on the screen that is available for application windows. | |||||||||||
| availTop (screen) |
Returns the top side of the area on the screen that is available for application windows. | |||||||||||
| availWidth (screen) |
Returns the width of the area on the screen that is available for application windows. | |||||||||||
| fullScreen (window) |
|
Specifies or retrieves whether the browser application is in full-screen mode or not. | ||||||||||
| height (screen) |
Returns the vertical resolution of the display screen, in pixels. | |||||||||||
| innerHeight (window) |
|
Returns the height of the browser's client area, including the horizontal scrollbar, if rendered. | ||||||||||
| innerWidth (window) |
|
Returns the width of the browser's client area, including the vertical scrollbar, if rendered. | ||||||||||
| left (screen) |
Retrieves the horizontal offset of top-left corner of the current screen relative to the top-left corner of the main screen, in pixels. | |||||||||||
| outerHeight (window) |
|
Sets or retrieves the total height of the browser window, including toolbars and scrollbars. | ||||||||||
| outerWidth (window) |
|
Sets or retrieves the total width of the browser window, including toolbars and scrollbars. | ||||||||||
| screenLeft (window) |
Returns an integer value that indicates the horizontal position of the left side of the browser's client area, relative to the left side of the screen. | |||||||||||
| screenTop (window) |
Returns an integer value that indicates the vertical position of the top side of the browser's client area, relative to the top side of the screen. | |||||||||||
| screenX (window) |
|
Returns an integer value that indicates the horizontal position of the left side of the browser window, relative to the left side of the screen. | ||||||||||
| screenY (window) |
|
Returns an integer value that indicates the vertical position of the top side of the browser window, relative to the top side of the screen. | ||||||||||
| top (screen) |
Retrieves the vertical offset of the top-left corner of the current screen relative to the top-left corner of the main screen, in pixels. | |||||||||||
| width (screen) |
Returns the horizontal resolution of the display screen, in pixels. | |||||||||||
| screen (window) |
Contains information about the dimensions of the screen and the display settings. |
| Method | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| moveBy (window) |
Moves the browser window by the specified number of pixels, relative to its current coordinates. | ||||||
| moveTo (window) |
Moves the top-left corner of the browser window to the specified position, relative the top-left corner of the screen. | ||||||
| resizeBy (window) |
Resizes the browser window by the specified amount of pixels, relative to its current size. | ||||||
| resizeTo (window) |
Resizes the browser window to the specified size. | ||||||
| sizeToContent (window) |
Fit the size of the current window to its contents. |
Objects, properties and methods that can be used to retrieve the dimensions of a rendered element or document:
Objects:
Properties:
Methods:
| Object | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| BoxObject | Contains information about the position of an element in the document hierarchy, and the position in the current window. | |||||||||||
| TextRectangle |
|
Represents the bounding rectangle of an element or TextRange object. | ||||||||||
| TextRectangles |
|
Represents a collection of TextRectangle objects that specifies the exact shape of an element or TextRange object. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| clientHeight | Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin. | ||||||
| clientLeft | Returns the width of the left border in pixels. | ||||||
| clientTop | Returns the height of the top border in pixels. | ||||||
| clientWidth | Returns the width of the visible area for an object, in pixels. The value contains the width with the padding, but does not include the scrollBar, border, and the margin. | ||||||
| offsetHeight | Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin. | ||||||
| offsetLeft | Returns the left position of an object relative to the left side of its offsetParent element, in pixels. | ||||||
| offsetTop | Returns the top position of the object relative to the top side of its offsetParent element, in pixels. | ||||||
| offsetWidth | Returns the width of the visible area for an object, in pixels. The value contains the width with the padding, scrollBar, and the border, but does not include the margin. |
| Method | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| getBoundingClientRect |
|
Returns a TextRectangle object that specifies the bounding rectangle of the current element or TextRange object, in pixels, relative to the upper-left corner of the browser's client area. | ||||||||||
| getBoxObjectFor (document) |
|
Returns a BoxObject object that represents the bounding rectangle of the specified element in pixels, relative to the upper-left corner of the document. | ||||||||||
| getClientRects |
|
Retrieves a TextRectangles collection that specifies the exact shape of the current element or TextRange object. |
Properties that can be used to specify and retrieve the dimensions of an element:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| bottom | Specifies or returns the bottom coordinate of a positioned element. | |||||||||||
| height | Specifies or returns the height of the visible area for an element. | |||||||||||
| left | Specifies or returns the left coordinate of a positioned element. | |||||||||||
| lineHeight | Specifies or returns the distance between lines of text in a block-level element. | |||||||||||
| maxHeight |
|
Specifies or returns the maximum height for the visible area of an element. | ||||||||||
| maxWidth |
|
Specifies or returns the maximum width for the visible area of an element. | ||||||||||
| minHeight | Specifies or returns a minimum height for the visible area of an element. | |||||||||||
| minWidth |
|
Specifies or returns the minimum width for the visible area of an element. | ||||||||||
| pixelBottom | Specifies or retrieves the value of the bottom style property, in pixels. | |||||||||||
| pixelHeight | Specifies or retrieves the value of the height style property, in pixels. | |||||||||||
| pixelLeft | Specifies or retrieves the value of the left style property, in pixels. | |||||||||||
| pixelRight | Specifies or retrieves the value of the right style property, in pixels. | |||||||||||
| pixelTop | Specifies or retrieves the value of the top style property, in pixels. | |||||||||||
| pixelWidth | Specifies or retrieves the value of the width style property, in pixels. | |||||||||||
| posBottom | Specifies or retrieves the value of the bottom style property as a floating-point number that specifies the value in the current unit type of the bottom property. | |||||||||||
| posHeight | Specifies or retrieves the value of the height style property as a floating-point number that specifies the value in the current unit type of the height property. | |||||||||||
| posLeft | Specifies or retrieves the value of the left style property as a floating-point number that specifies the value in the current unit type of the left property. | |||||||||||
| posRight | Specifies or retrieves the value of the right style property as a floating-point number that specifies the value in the current unit type of the right property. | |||||||||||
| posTop | Specifies or retrieves the value of the top style property as a floating-point number that specifies the value in the current unit type of the top property. | |||||||||||
| posWidth | Specifies or retrieves the value of the width style property as a floating-point number that specifies the value in the current unit type of the width property. | |||||||||||
| right | Specifies or returns the right coordinate of a positioned element. | |||||||||||
| top | Specifies or returns the top coordinate of a positioned element. | |||||||||||
| width | Specifies or returns the width of the visible area for an element. |
Some element specific properties to set or retrieve the dimensions of an element:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| rows (frameset) |
Sets or retrieves the heights of the rows within a frameset element. All frame elements in the same row have the same height as the row. | ||||||
| rows (textarea) |
Sets or retrieves the number of visible rows within a textarea element. | ||||||
| size (basefont, font) |
Specifies or returns the size of the font. | ||||||
| size (hr) |
Sets or retrieves the height of the horizontal rule. | ||||||
| size (input, isindex) |
Specifies or returns the width of a control, in characters. | ||||||
| size (keygen, select) |
Specifies or returns the count of the visible option items in a selection list. The selection list can be a select element or the selection list of a keygen element. |
Scrolling:
Properties:
Methods:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| pageXOffset (window) |
|
Retrieves the number of pixels by which the contents of the document are scrolled to left. | ||||||||||
| pageYOffset (window) |
|
Retrieves the number of pixels by which the contents of the document are scrolled upward. | ||||||||||
| scrollHeight | Returns the total height of an element's contents, in pixels. The value contains the height with the padding, but does not include the scrollBar, border, and the margin. | |||||||||||
| scrollLeft | Sets or retrieves the number of pixels by which the contents of an object are scrolled to the left. | |||||||||||
| scrollTop | Sets or retrieves the number of pixels by which the contents of an object are scrolled upward. | |||||||||||
| scrollWidth | Returns the total width of an element's contents, in pixels. The value contains the width with the padding, but does not include the scrollBar, border, and the margin. | |||||||||||
| scrollMaxX (window) |
Returns the maximum number of pixels by which the contents of the document can be scrolled horizontally. | |||||||||||
| scrollMaxY (window) |
Returns the maximum number of pixels by which the contents of the document can be scrolled vertically. | |||||||||||
| scrollX (window) |
Retrieves the number of pixels by which the contents of the document are scrolled to the left. | |||||||||||
| scrollY (window) |
Retrieves the number of pixels by which the contents of the document are scrolled upward. |
| Method | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| scroll (window) |
Scrolls the contents of the document window to the specified horizontal and vertical positions. | ||||||
| scrollBy (window) |
Scrolls the contents of the document window by the specified number of pixels. | ||||||
| scrollByLines | Scrolls the contents of the document vertically by the specified number of lines. | ||||||
| scrollByPages | Scrolls the contents of the document vertically by the specified number of pages. | ||||||
| scrollIntoView | Scrolls the specified element into the visible area of the document. | ||||||
| scrollTo (window) |
Scrolls the contents of the document window to the specified horizontal and vertical positions. |
Some useful methods to get the element or the component of the element that is located at a position:
| Method | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| componentFromPoint | Returns the region of the current element that is located at the specified coordinates. | |||||||||||
| elementFromPoint (document) |
|
Returns the element that is located at the specified coordinates. |
User Contributed Comments