HTML | DOM Style textDecorationLine Property
The Style textDecorationLine property in HTML DOM used to set the decoration for a line. We can specify any number of decorations for a line. It returns the decoration that is given to the text.
Syntax:
- It returns the textDecorationLine property.
object.style.textDecorationLine
- It is used to set the textDecorationLine property.
object.style.textDecorationLine = "none|underline|overline| line-through|initial|inherit"
Property Values:
- none: This is used to specify no line for text decoration.It is a default value.
- underline: This is used to specify line under the text.
- overline: This is used to specify line is displayed over the text.
- line-through: This is used to specify line is displayed through the text.
- initial: It sets the textDecorationLine property to its default value.
- inherit: This property is inherited from its parent element.
Return Value: It returns a string representing the text-decoration-line property for an element.
Example 1:
HTML
<!DOCTYPE html> < html > < head > < title >DOM Style textDecorationLine Property </ title > < style > #gfg { text-decoration: underline; } </ style > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >DOM StylestextDecorationLine Property </ h2 > < p id = "gfg" > A Computer science portal for Beginner</ p > < button type = "button" onclick = "Beginner()" > Change Decoration </ button > < script > function Beginner() { // Set overline. document.getElementById("gfg" ).style.textDecorationLine = "overline"; } </ 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 textDecorationLine Property </ title > < style > #gfg { text-decoration: underline; } </ style > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >DOM StylestextDecorationLine Property </ h2 > < p id = "gfg" > A Computer science portal for Beginner</ p > < button type = "button" onclick = "Beginner()" > Change Decoration </ button > < script > function Beginner() { // Set overline-through. document.getElementById("gfg" ).style.textDecorationLine = "overline line-through"; } </ script > </ center > </ body > </ html > |
Output:
- Before Click on the button:
- After Click on the button:
Supported Browsers: The browser supported by DOM Style textDecorationLine property are listed below:
- Google Chrome 57.0
- Edge 79.0
- Firefox 36.0
- Opera 44.0
- Apple Safari 12.1
Contact Us