jQuery Dimensions

jQuery provides several methods to get and set the dimensions of elements, including their width, height, inner dimensions (including padding), and outer dimensions (including padding, borders, and optionally margins). These methods make it easy to work with element sizes and adjust layouts dynamically.

Key Dimension Methods

1. .width()
   • Gets or sets the content width of an element (excluding padding, border, and margin).

   Syntax:

   $(selector).width(); // Get width
   $(selector).width(value); // Set width
   

   Try It Now

   Example:

   var width = $("#myDiv").width();
   console.log("Width:", width);
   
   $("#myDiv").width(300); // Sets width to 300px
   

   Try It Now

    

2. .height()
   • Gets or sets the content height of an element (excluding padding, border, and margin).

   Syntax:

   $(selector).height(); // Get height
   $(selector).height(value); // Set height
   

   Try It Now

   Example:

   var height = $("#myDiv").height();
   console.log("Height:", height);
   
   $("#myDiv").height(200); // Sets height to 200px
   

   Try It Now

    

3. .innerWidth()
   • Gets the width of an element, including padding but excluding border and margin.

   Syntax:

   $(selector).innerWidth();
   

   Try It Now

   Example:

   var innerWidth = $("#myDiv").innerWidth();
   console.log("Inner Width:", innerWidth);
   

   Try It Now

    

4. .innerHeight()
   • Gets the height of an element, including padding but excluding border and margin.

   Syntax:

   $(selector).innerHeight();
   

   Try It Now

   Example:

   var innerHeight = $("#myDiv").innerHeight();
   console.log("Inner Height:", innerHeight);
   

   Try It Now

    

5. .outerWidth()
   • Gets the width of an element, including padding and border but excluding margin.
   • Optional: Pass true to include margin as well.

   Syntax:

   $(selector).outerWidth(); // Excludes margin
   $(selector).outerWidth(true); // Includes margin
   

   Try It Now

   Example:

   var outerWidth = $("#myDiv").outerWidth(true);
   console.log("Outer Width:", outerWidth);
   

   Try It Now

    

6. .outerHeight()
   • Gets the height of an element, including padding and border but excluding margin.
   • Optional: Pass true to include margin as well.

   Syntax:

   $(selector).outerHeight(); // Excludes margin
   $(selector).outerHeight(true); // Includes margin
   

   Try It Now

   Example:

   var outerHeight = $("#myDiv").outerHeight(true);
   console.log("Outer Height:", outerHeight);
   

   Try It Now

    

Setting Dimensions

When setting dimensions, you can provide:

1. Pixels:
   Example:

   $("#myDiv").width(400); // Sets width to 400px
   

   Try It Now

    

2. Function:
   Example:

   $("#myDiv").width(function(index, currentWidth) {
       return currentWidth + 50; // Increases width by 50px
   });
   

   Try It Now

    

Examples

Get and Log Dimensions

<div id="myDiv" style="width: 300px; height: 150px; padding: 10px; border: 5px solid black; margin: 20px;">
    Content
</div>

var width = $("#myDiv").width();
var innerWidth = $("#myDiv").innerWidth();
var outerWidth = $("#myDiv").outerWidth(true); // Includes margin

console.log("Width:", width);
console.log("Inner Width:", innerWidth);
console.log("Outer Width (with margin):", outerWidth);

Set Dimensions

$("#myDiv").width(400).height(200);

Differences Between Methods

Practical Use Case

Responsive Box Adjustment

<div id="box" style="width: 300px; height: 200px; background: lightblue;">
    Resize me!
</div>
<button id="resize">Resize</button>

$("#resize").click(function() {
    $("#box").width(function(index, currentWidth) {
        return currentWidth + 50; // Increase width by 50px
    }).height(function(index, currentHeight) {
        return currentHeight + 30; // Increase height by 30px
    });
});

Notes

1. Default Units: When getting dimensions, the result is always in pixels (px), even if set using percentages or other units.
2. Hidden Elements: These methods return 0 for elements that are hidden (display: none).

Summary

jQuery’s dimension methods—.width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(), and .outerHeight()—are essential tools for dynamically measuring and adjusting element sizes. They are especially useful for creating responsive layouts and interactive UI elements.