Dimensions Manipulation in jQuery

Dimensions Manipulation in jQuery

Introduction Dimensions manipulation in jQuery involves changing and retrieving the size and position of HTML elements on a web page. jQuery provides several methods to perform these operations efficiently. This documentation will cover the commonly used methods for dimensions manipulation in jQuery, along with code examples and explanations.

Table of Contents

1. Retrieving Dimensions

   • .width()
   • .height()
   • .innerWidth()
   • .innerHeight()
   • .outerWidth()
   • .outerHeight()

2. Setting Dimensions

   • .width(value)
   • .height(value)
   • .innerWidth(value)
   • .innerHeight(value)
   • .outerWidth(value)
   • .outerHeight(value)

1. Retrieving Dimensions

.width()

• Description: Retrieves the current computed width of the first matched element, including padding but excluding border and margin.
• Example:

  javascript
  var elementWidth = $('.my-element').width();
  console.log('Width:', elementWidth);
  

.height()

• Description: Retrieves the current computed height of the first matched element, including padding but excluding border and margin.
• Example:

  javascript
  var elementHeight = $('.my-element').height();
  console.log('Height:', elementHeight);
  

.innerWidth()

• Description: Retrieves the current computed width of the first matched element, including padding but excluding border, margin, and scrollbar (if any).
• Example:

  javascript
  var innerWidth = $('.my-element').innerWidth();
  console.log('Inner Width:', innerWidth);
  

.innerHeight()

• Description: Retrieves the current computed height of the first matched element, including padding but excluding border, margin, and scrollbar (if any).
• Example:

  javascript
  var innerHeight = $('.my-element').innerHeight();
  console.log('Inner Height:', innerHeight);
  

.outerWidth()

• Description: Retrieves the current computed width of the first matched element, including padding and border but excluding margin.
• Example:

  javascript
  var outerWidth = $('.my-element').outerWidth();
  console.log('Outer Width:', outerWidth);
  

.outerHeight()

• Description: Retrieves the current computed height of the first matched element, including padding and border but excluding margin.
• Example:

  javascript
  var outerHeight = $('.my-element').outerHeight();
  console.log('Outer Height:', outerHeight);
  

2. Setting Dimensions

.width(value)

• Description: Sets the width of each matched element to the specified value. The value can be a number (in pixels) or a string (e.g., "100px").
• Example:

  javascript
  $('.my-element').width(300);
  

.height(value)

• Description: Sets the height of each matched element to the specified value. The value can be a number (in pixels) or a string (e.g., "200px").
• Example:

  javascript
  $('.my-element').height(200);
  

.innerWidth(value)

• Description: Sets the inner width of each matched element to the specified value, including padding.
• Example:

  javascript
  $('.my-element').innerWidth(400);
  

.innerHeight(value)

• Description: Sets the inner height of each matched element to the specified value, including padding.
• Example:

  javascript
  $('.my-element').innerHeight(250);
  

.outerWidth(value)

• Description: Sets the outer width of each matched element to the specified value, including padding and border.
• Example:

  javascript
  $('.my-element').outerWidth(500);
  

.outerHeight(value)

• Description: Sets the outer height of each matched element to the specified value, including padding and border.
• Example:

  javascript
  $('.my-element').outerHeight(300);
  

This documentation provides an overview of the commonly used methods for dimensions manipulation in jQuery. By utilizing these methods, you can easily retrieve and modify the dimensions of HTML elements in your web page, enabling dynamic and responsive designs.