HTML | DOM Style textDecorationColor Property

The Style textDecorationColor property in HTML DOM is used to set the color of the text-decoration like underlines, overlines, and line-throughs. It can also return the text-decoration color. Syntax:

It returns the textDecorationColor property.

object.style.textDecorationColor

It is used to set the textDecorationColor property.

object.style.textDecorationColor = "color|initial|inherit"

Property Values:

color: This is used to specify the color of the text decoration.
initial: It sets the textDecorationColorproperty to its default value.
inherit: This property is inherited from its parent element.

Return Value: It returns a string that represents the text decoration color property.

Example-1:

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style textDecorationColor Property </title>

    <style>

        #gfg {

            text-decoration: underline;

        }

    </style>
 
</head>
 
<body>
 
    <center>

        <h1 style="color:green;

                   width:40%;"> 

                GeeksForGeeks 

        </h1>

        <h2>DOM Style textDecorationColor Property </h2>

        <p id="gfg"> 

          A Computer science portal for geeks

        </p>
 
        <button type="button" onclick="geeks()">

            Chanege Decoration

        </button>
 
        <script>

            function geeks() {
 
                //  Set underline color.

                document.getElementById(

                  "gfg").style.textDecorationColor = 

                  "magenta";

            }

        </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 textDecorationColor Property </title>

    <style>

        #gfg {

            text-decoration: underline;

        }

    </style>
 
</head>
 
<body>
 
    <center>

        <h1 style="color:green;

                   width:40%;"> 

                GeeksForGeeks 

            </h1>

        <h2>DOM StylestextDecorationColor Property </h2>

        <p id="gfg">

          A Computer science portal for geeks

        </p>
 
        <button type="button" onclick="geeks()">

            Chanege Decoration

        </button>
 
        <script>

            function geeks() {

                // Set text decoration color.

                document.getElementById(

                  "gfg").style.textDecorationColor = 

                  "green";

            }

        </script>

    </center>

</body>
 
</html>