Open In App

HTML | DOM Style textDecorationColor Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

  • Before Click on the button:

 

  • After Click on the button:

 

Supported Browsers: The browser supported by DOM Style textDecorationColor property are listed below:

  • Google Chrome 57.0 and above
  • Edge 79 and above
  • Firefox 36.0 and above
  • Opera 44.0 and above
  • Apple Safari 12.1 and above
  • Internet Explorer not supported


Last Updated : 07 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads