HTML DOM Style height Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Style height property is used for setting or returning the height of an element.

Following is the syntax for −

Setting the height property −

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

The above properties are explained as follows −

Value
Description
Auto
Thisis the default value and the height set by the browser.
Length
Forsetting the browser height in length units.
%
Setsthe child element height in relative percentage to its parentelement.
initial
Forsetting this property to initial value.
inherit
Toinherit the parent property value

Let us look at an example for the height property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   #demo1 {
      width:100px;
      height:100px;
      background-color:lightpink;
   }
   #demo2 {
      margin-top:4px;
      width:100px;
      height:100px;
      background-color:coral;
   }
</style>
<script>
   function changeHeight() {
      document.getElementById("demo1").style.height="200px";
      document.getElementById("Sample").innerHTML="The height for the first div has been increased by    100px";
   }
</script>
</head>
<body>
   <div id="demo1" >DIV1</div>
   <div id="demo2" >DIV2</div>
   <p>Change the font height for the text inside above divs by clicking the below button</p>
   <button onclick="changeHeight()">Change Height</button>
   <p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Height” button −

raja
Published on 24-Oct-2019 08:41:04
Advertisements