How to change the height of a div with javascript

In this article, you will learn how to change the height of a div element with javascript. We can easily change the height of a div element using style.height property. The example is given below.

change the height of a div using javascript
   <div class="container">
       This is the parent element.
    </div>
   <button onclick="addStyle()">click me</button> 
   <script>
       function addStyle(){
       document.querySelector('.container').style.height = "190px";;
     } 
    </script>
Try it Yourself »

change the height of a div using setAttribute method.

The setAttribute() method creates a new attribute for an element and then sets a new value to the attribute. We can easily set a height attribute to a div element to change the height of the div element dynamically in javascript. Try the example given below.

change height of a div using setAttribute method
<div class="container">
  This is an element.
</div>
<script>
  function addStyle() { 
 document.querySelector('.container').setAttribute("style", "height:200px");
  }
</script>
Try it Yourself »

Conclusion

In this article, you have learned how to change the height of a div using javascript.