HTML | DOM Style textDecorationLine Property

The Style textDecorationLine property in HTML DOM used to set the decoration for a line. We can specify any number of decorations for a line. It returns the decoration that is given to the text.

Syntax:

  • It returns the textDecorationLine property.
    object.style.textDecorationLine
  • It is used to set the textDecorationLine property.
    object.style.textDecorationLine = "none|underline|overline|
    line-through|initial|inherit"

Property Values:



  • none:This is used to specify no line for text decoration.It is a default value.
  • underline:This is used to specify line under the text.
  • overline:This is used to specify line is displayed over the text.
  • line-through:This is used to specify line is displayed through the text.
  • intial: It sets the textDecorationLine property to its default value.
  • inherit:This property is inherited from its parent element.

Return Value: It returns a string representing the text-decoration-line property for an element.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Click on the button:
  • After Click on the button:

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before Click on the button:
  • After Click on the button:

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

  • Google Chrome 57.0
  • Firefox 36
  • Opera 44.0
  • Apple Safari 7.0


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.