How to Apply Styles Using the HTML DOM Style textDecoration Property?
Text is the most important and most visible asset for every application or webpage, without the usage of text the creator cannot fully convey his thoughts or deliver information properly. Due to its need and importance, its styling also becomes a nightmare for most developers. For static text, the CSS properties and its framework help a lot but still, there is a need for a property that can be applied to style dynamically. Fortunately, this property is provided by JavaScript having the name “textDecoration”.
This blog will provide the procedure to apply styles over the HTML element via the textDecoration property.
How to Apply Styles Using the HTML DOM Style textDecoration Property?
The DOM style “textDecoration” property basically performs styling like adding “underline”, “overline”, “line-through”, and “blink” over a selected element. This property when set to “none” removes the default styling which is applied over that element like an anchor tag.
Syntax
The syntax for DOM style textDecoration property is:
Visit the below table to get a quick idea about the values that can be assigned to the “textDecoration” property:
| Value | Explanation |
|---|---|
| none | Convert text into the plain format removing all pre-defined styling; it is the default. |
| overline | Inserts a line over or on top of the selected text. |
| blink | Makes text blink but it is not supported by all web browsers. |
| underline | It places the line under or at the bottom of the selected text. |
| initial | Set the applied property to its default value which is none in our case. |
| line-through | Place the line at the center of the text i.e. between the text. |
| inherit | Inherits the property applied to the root or parent element. |
Now, let’s have a look over the implementation process and its effect on text for each value of the “textDecoration” property.
Example 1: “textDecoration = none” Property
The practical implementation of the “textDecoration” property having a value of “none” is going to be explained in below code:
<center>
<h1 style="color: cadetblue;"> Linuxhint </h1>
<button onclick="Applier()"> Applier </button>
<p>When the value of textDecoration property is set to none: </p>
<h3 id="useCase" style="text-decoration: overline;"> Targeted Element </h3>
</center>
<script>
function Applier() {
document.getElementById("useCase").style.textDecoration = "none";
}
</script>
</body>
Explanation of the above-stated code:
- First, utilize a “<button>” tag to create a button and assign it an event listener of “onclick”. This event listener triggers a JavaScript function named “Applier”.
- Next, create a targeted element “h3” and assign it a unique id of “useCase”. Also, apply the CSS “text-decoration” property to it having a value of “overline” with the help of the “style” attribute.
- Now, enter the “Applier()” function body and select the targeted element via its id “useCase” and attach the style “textDecoration” property.
- After that, assign the property a value of “none” to remove any pre-applied text-decoration styling over the element.
The view of the webpage after the execution of the above code:
The output shows the pre-styling that is applied on the targeted element gets removed by assigning it a value of “none”.
Example 2: “textDecoration = initial” Property
The below code snippet illustrates the implementation of the “textDecoration” property when the value of “initial” is assigned to it:
function Applier() {
document.getElementById("useCase").style.textDecoration = "initial";
}
</script>
The output generated after the compilation of the above code is shown below:
The above output shows that the value of text decoration is set to its default value which is “none” and hence all pre-styling has been reverted.
Example 3: “textDecoration = overline” Property
The below code shows the practical implementation of the “textDecoration” property when the value of “overline” is provided to it:
<center>
<h1 style="color: cadetblue;"> Linuxhint </h1>
<button onclick="Applier()"> Applier </button>
<p>When the value of textDecoration property is set to overline: </p>
<h3 id="useCase"> Targeted Element </h3>
</center>
<script>
function Applier() {
document.getElementById("useCase").style.textDecoration = "overline";
}
</script>
</body>
The explanation of the above code is stated below:
- First, the “button” and “h3” element is created in the same manner and the CSS property which is applied over the “h3” element is now removed.
- Next, inside the “Applier” function the targeted element is selected and the “textDecoration” property having a value of “overline” is assigned to the element.
The output after the execution of the above code is displayed below:
The output shows the effect of the “textDecoration = overline” property over the text.
Example 4: “textDecoration = underline” Property
The practical implementation of the text when the value of “underline” is assigned to the “textDecoration” property is stated below:
function Applier() {
document.getElementById("useCase").style.textDecoration = "underline";
}
</script>
After the compilation, the output looks like this:
The output shows the line is added at the bottom of the text.
Example 5: “textDecoration = line-through” Property
Visual implementation of the “textDecoration” property having the value of “line-through” is shown below:
function Applier() {
document.getElementById("useCase").style.textDecoration = "line-through";
}
</script>
The output generated for the above code is displayed below:
The output shows the effect done by the “line-through” over the targeted element text.
Conclusion
The HTML DOM style “textDecoration” property specifically deals with the styling of HTML elements via JavaScript to perform dynamic styling on text elements. Multiple values can be assigned to this “textDecoration” to perform different variations of styling. These values are “none”, “overline”, “underline”, “line-through”, “initial”, “blink”, and “inherit”. This blog has successfully explained the process by which the developer can apply styles using the textDecoration property.
Source: linuxhint.com