JavaScript – Change the Height of HTML Element

To change the height of a HTML Element using JavaScript, get reference to this HTML Element element, and assign required height value to the element.style.height property.

In the following example, we will change the height of HTML Element with id "myElement" to "150px", in JavaScript, using element.style.height property.

example.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:1px solid #CCC;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Change Height of HTML Element in JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.height = "150px";
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to change the height of a HTML Element using JavaScript.