Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style textDecorationLine Property

  • Last Updated : 28 May, 2021

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
  • Firefox 36
  • Opera 44.0
  • Apple Safari 7.0

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :