Skip to content
Related Articles

Related Articles

HTML | DOM Style textDecorationLine Property

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Aug, 2022

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

HTML




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

Output: 

  • Before Click on the button: 

  • After Click on the button: 

Example 2:  

HTML




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

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
  • Edge 79.0
  • Firefox 36.0
  • Opera 44.0
  • Apple Safari 12.1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!