Manipulate DOM Element's Dimensions using jQuery

The jQuery library includes various methods to manipulate DOM element's dimensions like height, width, offset, position etc.

The following table lists all the jQuery methods to get or set DOM element's dimensions.

The following figure shows various dimensions of an element.

jQuery height() Method

The jQuery height()method gets or sets height of the specified DOM element(s).

$('selector expression').height(value);

Specify a selector to get the reference of an element and call height() method to get the height in pixel. To set the height of specified elements, specify height as integer parameter in height() method.

$('#myDiv').height(); //returns height of #myDiv in pixels
$('p').height(); //returns height in pixel

//set height of all div elements
$('div').height(100);

<div id="myDiv" >
    This is div.
</div>

<p>
    This is paragraph.
</p>

jQuery width() Method

The jQuery width() method gets or sets width of the specified DOM element(s).

$('selector expression').width(value);

Specify a selector to get the reference of an element and call width() method to get the width in pixel. Specify width as integer parameter to set the width.

$('#myDiv').width(); //returns width of #myDiv in pixels
$('p').width(); //returns width of p in pixel

//set width of all div elements
$('div').width(100);

<div id="myDiv" >
    This is div.
</div>

<p>
    This is paragraph.
</p>

jQuery offset() Method

The jQuery offset() method gets or sets coordinates of the specified element(s).

$('selector expression').offset(options);

Specify a selector to get the reference of an element and call offset() method to get the jQuery object which has left and top property. Specify JSON object with left and top property with the coordinates where you want to move the element.

var ofs = $('#myDiv').offset();
alert('left:' + ofs.left + ', top: ' + ofs.top);

$('p').offset({ left:100, top:200});

<div id="myDiv" >
    This is div.
</div>

<p>
    This is paragraph.
</p>

Visit DOM manipulation methods reference to know all the methods to manipulate dimensions.

Points to Remember :

1. jQuery dimension methods allows you to manipulate dimensions of DOM elements.
2. Use the selector to get the reference of an element(s) and then call jQuery dimension methods to edit it.
3. Important DOM manipulation methods: height(), width(), offset(), position() etc.