jQuery height() method

The jQuery height() method is used to get or set the computed height of an element, including padding, border, and optionally, margin. It allows you to retrieve the height of an element or set its height to a specific value.

The syntax for using the height() method is as follows:

To Get Height:

$(selector).height();

To Set Height:

$(selector).height(value);

• selector: It is a string that specifies the elements to be selected.
• value (optional): It is a numeric value representing the height in pixels that you want to set for the selected elements.

Here’s an example of how you can use the height() method:

HTML:

<div id="myDiv" style="width: 200px; height: 100px; background-color: blue;"></div>

JavaScript:

// Get the height of the div element
var height = $('#myDiv').height();
console.log('Height: ' + height + ' pixels');

// Set the height of the div element to 150 pixels
$('#myDiv').height(150);

In the above example, the height() method is used to get the height of the div element with the ID “myDiv” and log it to the console. Then, the height() method is used again to set the height of the same div element to 150 pixels.

Keep in mind that if you don’t provide a value when using height(), it will return the computed height (including padding and border) of the first matched element in the selected set. If multiple elements are selected, it will only return the height of the first element.

The height() method is useful when you need to get or set the height of elements dynamically, for example, in response to user interactions or when adjusting the layout of the page. Remember that when setting the height, the value you provide should be in pixels. If you want to use other units (e.g., percentage), you can use CSS styles or perform the necessary calculations before setting the height.