Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
Size
Scroll
Natural Size
Comprehensive
Query - Dimensions
Get and set element dimensions, scroll positions, and natural sizes.
Size
width
$('selector').width()$('selector').width(value)Gets or sets the width of elements.
Parameters
| Name | Type | Description |
|---|---|---|
| value | number/string | The width to set for the element(s) |
Returns
Width in pixels.
Example
height
$('selector').height()$('selector').height(value)Gets or sets the height of elements.
Parameters
| Name | Type | Description |
|---|---|---|
| value | number/string | The height to set for the element(s) |
Returns
Height in pixels.
Example
Scroll
scrollTop
$('selector').scrollTop()$('selector').scrollTop(value)Gets or sets the vertical scroll position of elements.
Parameters
| Name | Type | Description |
|---|---|---|
| value | number | The vertical scroll position to set in pixels |
Returns
Vertical scroll position in pixels.
Example
scrollLeft
$('selector').scrollLeft()$('selector').scrollLeft(value)Gets or sets the horizontal scroll position of elements.
Parameters
| Name | Type | Description |
|---|---|---|
| value | number | The horizontal scroll position to set in pixels |
Returns
Horizontal scroll position in pixels.
Example
Natural Size
naturalWidth
$('selector').naturalWidth()Gets the natural width of an element, including images and other HTML elements.
Performance Note Creates an off-screen clone to measure dimensions. Can cause reflow - use sparingly in performance-critical code.
Returns
Natural width in pixels.
Example
naturalHeight
$('selector').naturalHeight()Gets the natural height of an element, including images and other HTML elements.
Returns
Natural height in pixels.
Example
Comprehensive
dimensions
$('selector').dimensions()Gets comprehensive dimension information for elements.
Returns
Object containing position, size, and box model data:
| Property | Description |
|---|---|
top, left, right, bottom | Viewport position |
pageTop, pageLeft | Document position |
width, height | Content dimensions |
innerWidth, innerHeight | Content + padding |
outerWidth, outerHeight | Content + padding + border |
marginWidth, marginHeight | Full box including margin |
scrollTop, scrollLeft | Scroll position |
scrollHeight, scrollWidth | Scrollable dimensions |
box | Box model details (padding, border, margin) |
bounds | DOMRect bounding box |