Skip to content
Related Articles

Related Articles

HTML | DOM Style textDecoration Property

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

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

html




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

Output: 
 

  • Before clicking on the button: 
     

  • After clicking on the button: 
     

Example-2: 
 

html




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

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 1 and above
  • Edge 12 and above
  • Internet Explorer 3 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Apple Safari 1 and above

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!