Manipulating DOM Element Dimensions with jQuery

Master jQuery's dimension methods like height(), width(), and offset() to control element sizes and positions. Get practical examples and tips for enhancing your web layout.

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

jQuery Methods for Dimensions

jQuery Method	Description
height()	Get or set the height of the specified element(s).
innerHeight()	Get or set the inner height (padding + element's height) of the specified element(s).
outerHeight()	Get or set the outer height (border + padding + element's height) of the specified element(s).
offset()	Get or set the left and top coordinates of the specified element(s).
position()	Get the current coordinates of the specified element(s).
width()	Get or set the width of the specified element(s).
innerWidth()	Get or set the inner width (padding + element's width) of the specified element(s).
outerWidth()	Get or set the outer width (border + padding + element's width) of the specified element(s).

Example: jQuery height() Method

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


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

        $('p').height(); // returns height in pixels


        // set height of all div elements

        $('div').height(100);

This is div.

This is paragraph.

Example: jQuery width() Method

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


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

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


        // set width of all div elements

        $('div').width(100);

This is div.

This is paragraph.

Example: jQuery offset() Method

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


        var ofs = $('#myDiv').offset();

        alert('left: ' + ofs.left + ', top: ' + ofs.top);


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

This is div.

This is paragraph.

Points to Remember

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