HTML | DOM Style textDecoration Property

Last Updated : 15 May, 2021

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.
initial: 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:

html

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

html

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