Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style textDecoration Property

  • Last Updated : 15 May, 2021

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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :