jQuery Dimensions

We have 6 methods which retrieves or sets dimensions of elements.
  1. width() - Gets or sets the width of the selected element
  2. height() - Gets or sets the height of the selected element
  3. innerWidth() - Gets the inner width of the selected element
  4. innerHeight() - Gets the inner height of the selected element
  5. outerWidth() - Gets the outer width of the selected element
  6. 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.
  1. width() - Measures the width of the element space used
  2. innerWidth() - Measures the width of the element space along with the padding space taken around the element
  3. outerWidth() - Measures the wdith of the element space, padding space and the border space used for the element
  4. 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>

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.
  1. height() - Measures the height of the element space used
  2. innerHeight() - Measures the height of the element space along with the padding space taken around the element
  3. outerHeight() - Measures the height of the element space, padding space and the border space used for the element
  4. 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>

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 js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message