jQuery Dimensions

jQuery - Working with Element Dimensions

jQuery simplifies obtaining and setting the dimensions (width and height) of HTML elements and the browser window.

jQuery Dimension Methods

jQuery offers several methods for interacting with element dimensions:

• width() / height(): Get or set the computed width/height of the element’s content area.
• innerWidth() / innerHeight(): Get the computed width/height including padding, but not border.
• outerWidth() / outerHeight(): Get the computed width/height including padding and border.
• outerWidth(true) / outerHeight(true): Get the computed width/height including padding, border, and margin.

Understanding the Box Model

These methods relate directly to the CSS Box Model. Imagine an element as a series of concentric boxes:

• Content: The area where text and images appear. width() and height() relate to this.
• Padding: Clears an area around the content. Transparent. innerWidth() and innerHeight() include this.
• Border: A border that goes around the padding and content. outerWidth() and outerHeight() (without true) include this.
• Margin: Clears an area outside the border. Transparent. outerWidth(true) and outerHeight(true) include this.

Visual Representation (Textual):

-------------------------------------
| Margin                        |
|   -------------------------   |
|   | Border                |   |
|   |   -----------------   |   |
|   |   | Padding       |   |   |
|   |   |   -----------   |   |   |
|   |   |   | Content |   |   |   |
|   |   |   -----------   |   |   |
|   |   -----------------   |   |
|   -------------------------   |
-------------------------------------

Note on box-sizing: The CSS property box-sizing: border-box; changes the box model calculation. When set, the element’s width and height properties (as set in CSS) define the total width/height including padding and border. The content area shrinks to accommodate padding and borders. jQuery dimension methods still return the computed values according to the standard box model definitions above, but the initial CSS width/height will correspond to outerWidth/outerHeight if border-box is active.

It’s highly recommended to set box-sizing: border-box; globally for more intuitive layout control: *, *::before, *::after { box-sizing: border-box; }

jQuery width() and height() Methods

Get or set the current computed width/height of the content area for the first element in the set.

Example: Getting dimensions:

// Assumes a div with id='box1' styled with CSS
$("#getDimensionsBtn").click(function() {
  const $box = $("#box1");
  const boxWidth = $box.width();
  const boxHeight = $box.height();
  $box.html(`Content Width: ${boxWidth}px<br>Content Height: ${boxHeight}px`);
});

jQuery innerWidth() and innerHeight() Methods

Get the current computed inner width/height (including padding) for the first element in the set.

Example:

// Assumes div#box1 has padding
$("#getInnerDimensionsBtn").click(function() {
  const $box = $("#box1");
  const innerW = $box.innerWidth();
  const innerH = $box.innerHeight();
  $box.append(`<br>Inner Width (inc. padding): ${innerW}px<br>Inner Height (inc. padding): ${innerH}px`);
});

jQuery outerWidth() and outerHeight() Methods

Get the current computed outer width/height (including padding and border). Pass true as an argument to include margin as well.

Example:

// Assumes div#box1 has padding, border, and margin
$("#getOuterDimensionsBtn").click(function() {
  const $box = $("#box1");
  const outerW = $box.outerWidth(); // Includes padding + border
  const outerH = $box.outerHeight(); // Includes padding + border
  const outerW_Margin = $box.outerWidth(true); // Includes padding + border + margin
  const outerH_Margin = $box.outerHeight(true); // Includes padding + border + margin

  $box.append(`<br>Outer Width (inc. padding + border): ${outerW}px`);
  $box.append(`<br>Outer Height (inc. padding + border): ${outerH}px`);
  $box.append(`<br>Outer Width (inc. padding + border + margin): ${outerW_Margin}px`);
  $box.append(`<br>Outer Height (inc. padding + border + margin): ${outerH_Margin}px`);
});

Document and Window Dimensions

You can also get the dimensions of the entire HTML document or the browser viewport (window):

$("#getDocWinDimensionsBtn").click(function() {
  const docWidth = $(document).width();
  const docHeight = $(document).height();
  const winWidth = $(window).width();
  const winHeight = $(window).height();

  const info = `Document WxH: ${docWidth} x ${docHeight}\nWindow WxH: ${winWidth} x ${winHeight}`;
  alert(info);
  console.log(info);
});

Note: $(window).width() typically represents the viewport width excluding scrollbars, while window.innerWidth includes them. Behavior can vary slightly across browsers.

Setting Dimensions

You can use width() and height() to set the dimensions of elements. Remember this sets the content width/height, unless box-sizing: border-box; is applied.

Example: Setting width and height of a div:

$("#resizeBoxBtn").click(function() {
  $("#box1").width(300).height(150); // Set content width to 300px, height to 150px
  console.log('Box dimensions set.');
});

jQuery CSS Reference

For a complete overview of all jQuery CSS and dimension-related methods, please refer to the jQuery CSS documentation and jQuery Dimensions documentation.