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






                        filter_none








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







                        filter_none








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 
    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
bestharadhakrishna
Check out this Author's contributed articles.
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.