Skip to content
Related Articles

Related Articles

HTML | DOM Style height Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 24 Nov, 2021

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: 

ValueDescription
autoDefault value
lengthThis define height in length unit
%This define height in percentage compare with the parent element.
initialsets its default value
inheritinherit 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
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera
  • Safari 1.0


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!