HTML | DOM Style textDecorationStyle Property
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
Please Login to comment...