HTML - DOM Style Object height Property

Quiz

HTML DOM Style Object height property sets or returns the height of an element. It affects only block-level elements or element with absolute or fixed position.

Syntax

Set the height property:

object.style.height= "auto | length | percentage | initial| inherit";

Get the height property:

object.style.height;

Property Values

Value	Description
auto	It is the default value where browser sets the height.
length	It specifies height in length units.
percentage	It specifies height in percentage of the parent element.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents height of an element.

Examples of HTML DOM Style Object 'height' Property

The following examples set the height of div and image.

Set the height of div Element

The following example sets the height of div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontWeight Property
    </title>
    <style>
        div {
            background-color: #04af2f;
        }
    </style>
</head>
<body>
    <p>Click to set height of div element.</p>
    <button onclick="fun()">Set Height</button>
    <br>
    <br>
    <div id="height">
        Welcome to Tutorials Point.
    </div>    
    <script>
        function fun() {
            document.getElementById("height")
                .style.height= "400px";
        }
    </script>
</body>
</html>

Set height of Image

The following example sets the height of image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontWeight Property
    </title>
</head>
<body>
    <p>Click to set height of div element.</p>
    <button onclick="fun()">Set Height</button>
    <br>
    <br>
    <img src="/html/images/test.png" id="height">  
    <script>
        function fun() {
            document.getElementById("height")
                .style.height= "50px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
height	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page