HTML | DOM Style textDecoration Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.