## jQuery height() Method
The jQuery `height()` method is a built-in DOM manipulation tool used to set or return the height of selected elements.
Unlike other dimension methods in jQuery, the `height()` method specifically targets the content area of an element. It does **not** include padding, borders, or margins in its calculations.
---
## Understanding the Box Model Dimensions
To use `height()` effectively, it is important to understand how jQuery calculates element dimensions. The diagram below illustrates which parts of the CSS Box Model are targeted by each jQuery dimension method:
```
+-----------------------------------------------------------+
| MARGIN |
| +---------------------------------------------------+ |
| | BORDER | |
| | +-------------------------------------------+ | |
| | | PADDING | | |
| | | +-----------------------------------+ | | |
| | | | CONTENT | | | |
| | | | | | | |
| | | | jQuery height() / width() | | | |
| | | | | | | |
| | | +-----------------------------------+ | | |
| | | innerHeight() | | |
| | +-------------------------------------------+ | |
| | outerHeight() | |
| +---------------------------------------------------+ |
| outerHeight(true) |
+-----------------------------------------------------------+
```
### Related Methods:
* **`width()`**: Sets or returns the width of an element (excluding padding, border, and margin).
* **`innerHeight()`**: Returns the height of an element, including padding but excluding borders and margins.
* **`innerWidth()`**: Returns the width of an element, including padding but excluding borders and margins.
* **`outerHeight()`**: Returns the height of an element, including padding and borders. If passed `true` as an argument (`outerHeight(true)`), it also includes the margin.
* **`outerWidth()`**: Returns the width of an element, including padding and borders. If passed `true` as an argument (`outerWidth(true)`), it also includes the margin.
---
## Syntax and Usage
The `height()` method can be used in three different ways: to get the height, to set a static height, or to set a dynamic height using a callback function.
### 1. Get the Height
Returns the height of the **first** matched element in the set.
```javascript
$(selector).height()
```
### 2. Set the Height
Sets the height of **all** matched elements.
```javascript
$(selector).height(value)
```
### 3. Set the Height Using a Function
Passes a callback function to dynamically calculate and set a new height for each matched element.
```javascript
$(selector).height(function(index, currentHeight))
```
### Parameter Details
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `value` | `String` \| `Number` | **Required (for setting).** Specifies the height of the element. You can pass a number (e.g., `300`, which defaults to `300px`) or a string with a valid CSS unit (e.g., `"300px"`, `"20em"`, `"50%"`). |
| `function(index, currentHeight)` | `Function` | **Optional.** A callback function that returns the new height.
• `index`: The index position of the element in the matched set.
• `currentHeight`: The current height of the element. |
---
## Code Examples
### Example 1: Get the Height of an Element
The following code retrieves and alerts the height of a `
` element when a button is clicked.
```javascript
$("button").click(function() {
// Returns the content height of the first
element
let divHeight = $("div").height();
alert("The height of the div is: " + divHeight + "px");
});
```
### Example 2: Set the Height Using Different Units
You can set the height of elements using numbers (pixels by default) or strings containing CSS units like `em`, `%`, or `vh`.
```javascript
$("button").click(function() {
// Sets the height of all
elements to 400px (default unit is px)
$("#div1").height(400);
// Sets the height of all
elements using em units
$("#div2").height("25em");
// Sets the height of all
elements using percentage units
$("#div3").height("50%");
});
```
### Example 3: Dynamically Increase Height Using a Callback Function
This example demonstrates how to use a callback function to increase the height of each clicked `
` element by 50 pixels.
```javascript
$("div").click(function() {
$(this).height(function(index, currentHeight) {
// Returns the current height plus 50 pixels
return currentHeight + 50;
});
});
```
### Example 4: Get Document and Window Heights
The `height()` method can also be used to find the height of the browser viewport (window) or the entire HTML document.
```javascript
$(document).ready(function() {
// Get the height of the browser viewport
let windowHeight = $(window).height();
console.log("Viewport Height: " + windowHeight);
// Get the height of the HTML document
let documentHeight = $(document).height();
console.log("Document Height: " + documentHeight);
});
```
---
## Key Considerations
1. **Box-Sizing Impact**: If the CSS `box-sizing` property of an element is set to `border-box`, the `height()` method will subtract the padding and border widths to return the height of the content area only.
2. **Hidden Elements**: If an element or its parent is hidden via `display: none`, calling `height()` may return `0` or inaccurate values depending on the browser.
3. **Window and Document**: When applied to `$(window)` or `$(document)`, `height()` returns the height of the viewport or document, respectively. You cannot set the height of `window` or `document` using this method.
4. **Empty Selection**: If the jQuery selector matches an empty set (no elements found), calling `.height()` will return `undefined`.
YouTip