A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/javascript/html-dom-style-height-property/ below:

HTML | DOM Style height Property

HTML | DOM Style height Property

Last Updated : 11 Jul, 2025

HTML DOM Style height Property is similar to CSS Height Property but it is used to set or get height of an element dynamically.

Syntax : 

object.style.height = auto|length|%|initial|inherit;
object.style.height


Property Values: 

Value Description auto Default value length This define height in length unit % This define height in percentage compare with the parent element. initial sets its default value inherit inherit the property from parents


Return Value: String that gives height of the element.

Example-1: 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style height Property
    </title>
    <style>
        p {
            height: auto;
            color: white;
            font-size: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <br>
    <button onclick="Play()">
      Click to change height
    </button>
    <br/>
    <br/>
    <script>
        function Play() {
            document.getElementById(
              "block").style.height = "200px"
        }
    </script>
    <p id="block">
        Geeks For Geeks
    </p>

</body>
</html>

Output 

HTML DOM Height Before HTML DOM Height after


Example-2: 

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style height Property
    </title>
    <style>
        div {
            height: 10px;
            background-color: green;
            width: 100px;
        }
    </style>
</head>
<body>
    <br>
    <button onclick="Play()">
      Click to increase height of object
    </button>
    <br/>
    <br/>
    <script>
        function Play() {
            document.getElementById("block"
               ).style.height = "100px"
        }
    </script>
    <center>
        <div id="block">
        </div>
    </center>
</body>
</html>

Output : 

DOM Height example before DOM height after


Supported Browsers: The browser supported by DOM Style height property are listed below:


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4