HTML | DOM Style textDecoration Property

Last Updated : 02 Aug, 2019

The Style textDecoration property in HTML DOM used to set one or more decorations for a text. We can specify one or more text decorations for a text separated by spaces. It returns the textDecoration property that is given to text.

Syntax:

It returns the textDecoration property.:
```
object.style.textDecoration
```

It is used to set the textDecoration property:

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

Property Values:

none: It is used to define a normal text.It is a default value.
underline: It defines a line under the text.
overline: It defines a line above the text.
line-through: It defines a line through the text.
intial: It sets the textDecoration property to its default value.
inherit: This property is inherited from its parent element.

Return Value:It returns a string representing the decoration given to text.

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Style textDecoration Property </title> 
</head> 
  
<body> 
  
    <center> 
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1> 
        <h2>DOM Style textDecoration Property </h2> 
        <p id="gfg"> A Computer science 
          portal for geeks</p> 
  
        <button type="button" onclick="geeks()"> 
            set Decoration 
        </button> 
  
        <script> 
            function geeks() { 
                document.getElementById( 
                  "gfg").style.textDecoration = 
                  "underline"; 
            } 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example-2:

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
     DOM Style textDecoration Property  
  </title> 
  
</head> 
  
<body> 
  
    <center> 
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1> 
        <h2>DOM Style textDecoration Property </h2> 
        <p id="gfg"> A Computer science portal for geeks 
      </p> 
  
        <button type="button" onclick="geeks()"> 
            set Decoration 
        </button> 
  
        <script> 
            function geeks() { 
                
                document.getElementById( 
                  "gfg").style.textDecoration =  
                  "line-through overline"; 
            } 
        </script> 
    </center> 
</body> 
  
</html> 