How to set height of a div in JavaScript?

In this article, you are going to learn how to set the height of a <div> element in JavaScript.

Adjusting the height of HTML elements dynamically is a common task in web development, and JavaScript provides us with a couple of methods to achieve this.

We'll explore two meaningful approaches to solve this problem: using the style property and the clientHeight property.

Method 1: Using the style Property #

To set the height of a <div> element using the style property in JavaScript, you can follow the following code:

Explanation of the above example:

1. We select the <div> element with the desired ID using getElementById() method.
2. We access the style property of the selected element to manipulate its CSS styles.
3. By setting the height property of the style object to '100px', we define the new height.

Method 2: Using the clientHeight Property #

To set the height of a <div> element using the clientHeight property in JavaScript, follow this code:

Explanation:

1. We first select the sourceElement that you want to obtain the clientHeight from. This could be another <div> or any other HTML element.
2. We also select the myDiv element where you want to set the height.
3. We retrieve the clientHeight of the sourceElement and store it in the newHeight variable.
4. Finally, we apply the obtained newHeight to the style property of the myDiv, setting its height to match the clientHeight of the source element.

Conclusion #

In this article, we explored two methods for setting the height of a <div> element in JavaScript.

The first method utilizes the style property, allowing direct manipulation of CSS properties. The second method uses the clientHeight property to dynamically set the height based on a variable.