Skip to content
Related Articles

Related Articles

HTML | DOM Style textDecorationStyle Property

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

The Style textDecorationStyle property in HTML DOM is used to set the line. It can display the line in various styles like a single line, double line, wavy etc. By using this property we can display the line in specified style.
Syntax: 
 

  • It returns the textDecorationStyle property. 
     
object.style.textDecorationStyle
  • It is used to set the textDecorationStyle property. 
     
object.style.textDecorationStyle = "solid|double|dotted|dashed|
wavy|initial|inherit"

 

Property Values: 
 

  • solid:This property used to display line as a single line.This is a default value.
  • double:This property used to display line as a double line.
  • dotted:This property used to display line as a dotted line.
  • dashed: This property used to display line as a dashed line.
  • wavy:This property used to display line as a wavy line .
  • initial: It sets the textDecorationStyle property to its default value.
  • inherit:This property is inherited from its parent element.

Return Value: 
 

  • It returns string that represents a textDecorationStyle property of a element.

Example-1: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Style textDecorationStyle Property </title>
    <style>
            #gfg {
            text-decoration: underline;
    </style>
 
</head>
 
<body>
 
    <center>
        <h1 style="color:green;width:40%;">
                GeeksForGeeks
            </h1>
       
        <h2>DOM Style textDecorationStyle Property </h2>
       
        <p id="gfg">
          A Computer science portal for geeks
      </p>
 
 
 
        <button type="button" onclick="geeks()">
            Change Style
        </button>
 
        <script>
            function geeks() {
               
                // Set textDecorationStyle Property
                document.getElementById(
                  "gfg").style.textDecorationStyle =
                  "double";
            }
        </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 textDecorationStyle Property </title>
    <style>
            #gfg {
            text-decoration: underline;
    </style>
 
</head>
 
<body>
 
    <center>
        <h1 style="color:green;width:40%;">
                GeeksForGeeks
            </h1>
        <h2>DOM Style textDecorationStyle Property </h2>
 
        <p id="gfg">
            A Computer science portal for geeks
        </p>
 
 
 
        <button type="button" onclick="geeks()">
            Change Style
        </button>
 
        <script>
            function geeks() {
 
                // Set textDecorationStyle Property
                document.getElementById(
                  "gfg").style.textDecorationStyle =
                  "wavy";
            }
        </script>
    </center>
</body>
 
</html>

Output:
 

  • Before Click on the button: 
     

 

  • After Click on the button: 
     

Supported Browsers: The browser supported by DOM Style textDecorationStyle property are listed below: 
 

  • Google Chrome 57.0 and above
  • Edge 79.0 and above
  • Firefox 36.0 and above
  • Opera 44.0 and above
  • Safari 12.1 and above
  • Internet Explorer not supported

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!