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.

    <div class="container">
       This is the parent element.
    </div>
   <button onclick="myFunc()">click me</button> 
   <script>
       function myFunc(){
       document.querySelector('.container').style.height = "190px";;
     } 
    </script>

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.

<div class="container">
  This is an element.
</div>
<script>
  function myFunc() { 
   document.querySelector('.container').setAttribute("style", "height:200px");
  }
</script>

Conclusion

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