Skip to content
Related Articles

Related Articles

HTML | DOM Style textDecorationColor Property
  • Last Updated : 02 Aug, 2019

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:






<!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:




<!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
  • Firefox 36.0
  • Opera 44.0
  • Apple Safari 7.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :