HTML | DOM Style textDecorationLine Property

Last Updated : 05 Aug, 2022

The Style textDecorationLine property in HTML DOM used to set the decoration for a line. We can specify any number of decorations for a line. It returns the decoration that is given to the text.

Syntax:

It returns the textDecorationLine property.

object.style.textDecorationLine

It is used to set the textDecorationLine property.

object.style.textDecorationLine = "none|underline|overline|
line-through|initial|inherit"

Property Values:

none: This is used to specify no line for text decoration.It is a default value.
underline: This is used to specify line under the text.
overline: This is used to specify line is displayed over the text.
line-through: This is used to specify line is displayed through the text.
initial: It sets the textDecorationLine property to its default value.
inherit: This property is inherited from its parent element.

Return Value: It returns a string representing the text-decoration-line property for an element.

Example 1:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style textDecorationLine Property </title>
    <style>
        #gfg {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <center>
        <h1 style="color:green;"> 
                GeeksForGeeks 
        </h1>
        <h2>DOM StylestextDecorationLine Property </h2>
        <p id="gfg"> A Computer science portal for geeks</p>

        <button type="button" onclick="geeks()">
            Change Decoration
        </button>
        <script>
            function geeks() {
              
                //  Set overline.
                document.getElementById("gfg"
                 ).style.textDecorationLine = "overline";
            }
        </script>
    </center>
</body>
</html>

Output:

Before Click on the button:

After Click on the button:

Example 2:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM Style textDecorationLine Property </title>
    <style>
        #gfg {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <center>
        <h1 style="color:green;"> 
                GeeksForGeeks 
        </h1>
        <h2>DOM StylestextDecorationLine Property </h2>
        <p id="gfg"> A Computer science portal for geeks</p>

        <button type="button" onclick="geeks()">
            Change Decoration
        </button>
        <script>
            function geeks() {
              
                //  Set overline-through.
                document.