HTML - DOM Style Object lineHeight Property

Quiz

HTML DOM Style Object lineHeight property sets or returns the distance between lines in a text.

Syntax

Set the lineHeight property:

object.style.lineHeight= "normal | number | length | percentage | initial | inherit";

Get the lineHeight property:

object.style.lineHeight;

Property Values

Value	Description
normal	It is the default value which specifies normal line height.
number	It specifies a number which will be multiplied with current font size to set line height.
length	It specifies line height in length units.
percentage	It specifies line height in percentage of current font size.
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 the distance between lines in the text.

Example of HTML DOM Style Object 'lineHeight' Property

In the following example we have used length, percentage and number values on div element to change the line height.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object lineHeight Property
    </title>
</head>
<body>
    <h3>
        Click to set line height.
    </h3>
    <button onclick="fun()">Set Line Height</button>
    <button onclick="funTwo()">Set Percentage</button>
    <button onclick="funThree()">Set Number</button>
    <br>
    <br>
    <div id="height">
        <p>
            CSS is the acronym for "Cascading Style Sheet".
        </p>
        <p>
            It's a style sheet language used for describing
        </p>
        <p>
            the presentation of a document written in a
        </p>
        <p>
            markup language like HTML. CSS helps the web
        </p>
        <p>
            developers to control the layout and other
        </p>
        <p>visual aspects of the web pages.</p>
    </div>
    <script>
        function fun() {
            document.getElementById("height")
                .style.lineHeight = "50px";
        }
        function funTwo() {
            document.getElementById("height")
                .style.lineHeight = "150%";
        }
        function funThree() {
            document.getElementById("height")
                .style.lineHeight = "3";
        }
    </script>
</body>
</html>

Supported Browsers

Property
lineHeight	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page