Open In App

HTML | DOM Style height Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 : 

  • To set the height property : 
object.style.height = auto|length|%|initial|inherit;
  • To get height property value: 
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 

  • Before : 
HTML DOM Height Before gfg

HTML DOM Height Before

  • After : 
HTML DOM Height after gfg

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 : 

  • Before : 
DOM Height example before gfg

DOM Height example before

  • After : 
DOM height after gfg

DOM height after

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

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads