jQuery Dimensions

We have 6 methods which retrieves or sets dimensions of elements.

width() - Gets or sets the width of the selected element
height() - Gets or sets the height of the selected element
innerWidth() - Gets the inner width of the selected element
innerHeight() - Gets the inner height of the selected element
outerWidth() - Gets the outer width of the selected element
outerHeight() - Gets the outer height of the selected element

Width Methods

width(), innerWidth(), outerWidth() are the three methods which gets the width of their respective sizes.
Here is the breakdown of the width measured to show a output for the method used.

width() - Measures the width of the element space used
innerWidth() - Measures the width of the element space along with the padding space taken around the element
outerWidth() - Measures the wdith of the element space, padding space and the border space used for the element
outerWidth(true) - Measures the width of the element, padding, border and the margin spaces of the element

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Dimensions Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    #exampleElement {
      border: 2px solid #ccc;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>
<body>

<div id="exampleElement">
  <p>This is an example element with some content.</p>
</div>

<script>
  // Setting a custom width for the element
  $("#exampleElement").width(300);

  // Retrieving and displaying various dimensions
  var width = $("#exampleElement").width();
  var innerWidth = $("#exampleElement").innerWidth();
  var outerWidth = $("#exampleElement").outerWidth();
  var outerWidthWithMargin = $("#exampleElement").outerWidth(true);

  // Displaying the dimensions
  $("#exampleElement").append("<p>Width: " + width + "</p>");
  $("#exampleElement").append("<p>Inner Width: " + innerWidth + "</p>");
  $("#exampleElement").append("<p>Outer Width: " + outerWidth + "</p>");
  $("#exampleElement").append("<p>Outer Width (with margin): " + outerWidthWithMargin + "</p>");
</script>

</body>
</html>

Run

Height Methods

height(), innerHeight(), outerHeight() are the three methods which gets the height of their respective sizes.
Here is the breakdown of the height measured to show a output for the method used.

height() - Measures the height of the element space used
innerHeight() - Measures the height of the element space along with the padding space taken around the element
outerHeight() - Measures the height of the element space, padding space and the border space used for the element
outerHeight(true) - Measures the height of the element, padding, border and the margin spaces of the element

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Height Dimensions Example</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    #exampleElement {
      border: 2px solid #ccc;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>
<body>

<div id="exampleElement">
  <p>This is an example element with some content.</p>
</div>

<script>
  // Setting a custom height for the element
  $("#exampleElement").height(200);

  // Retrieving and displaying various height dimensions
  var height = $("#exampleElement").height();
  var innerHeight = $("#exampleElement").innerHeight();
  var outerHeight = $("#exampleElement").outerHeight();
  var outerHeightWithMargin = $("#exampleElement").outerHeight(true);

  // Displaying the height dimensions
  $("#exampleElement").append("<p>Height: " + height + "</p>");
  $("#exampleElement").append("<p>Inner Height: " + innerHeight + "</p>");
  $("#exampleElement").append("<p>Outer Height: " + outerHeight + "</p>");
  $("#exampleElement").append("<p>Outer Height (with margin): " + outerHeightWithMargin + "</p>");
</script>

</body>
</html>

Run

Quick Recap - Topics Covered

jQuery Dimensions

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example 1

jQuery Dimensions

Width Methods

Height Methods

Quick Recap - Topics Covered

Practice With Examples in Compilers

Quiz