Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the color of the text-decoration with JavaScript?
In this tutorial, we will learn how to set the color of the text-decoration with JavaScript.
The text-decoration is a CSS property used to decorate text lines. We can decorate a line using underline, overline, line-through, or none. To set the color of the text-decoration with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them ?
Using the style.textDecorationColor Property
Using the style.setProperty Method
Using the style.textDecorationColor Property
In JavaScript, the style.textDecorationColor property of an element is used to set the color of the text-decoration of an element. Any color can be set for the text-decoration using the color name, hex color code, or rgb color code. To set the color of the text-decoration using the style.textDecorationColor property, firstly, we need to access the element object using the document.getElementById() method and then use the style.textDecorationColor property to set the color of the text-decoration.
Syntax
const object = document.getElementById('element_id')
object.style.textDecorationColor = 'color | inherit | initial'
Here 'element_id' is the id of an HTML element. Using the document.getElementById() method, we are accessing the element object and setting the style.textDecorationColor property.
Parameters
color ? The color of the text-decoration.
inherit ? The color of the text-decoration is inherited by its parent element's property.
initial ? The color of the text-decoration sets to default.
Example
In the below example, we have used the style.textDecorationColor property to set the color of the text-decoration with JavaScript. We have used a button "Set Text-Decoration Color" click event to execute the "setTextDecorationColor()" function that sets the color of the text-decoration of multiple lines.
<html>
<head>
<style>
.decoration {
text-decoration: underline;
padding: 10px;
margin: 5px 0px;
background-color: rgb(220 252 243);
}
</style>
</head>
<body>
<h2> Using the style.textDecorationColor Property </h2>
<button onclick="setTextDecorationColor()"> Set Text-Decoration Color </button>
<div>
<div id="text1" class="decoration"> Welcome to Tutorialspoint! </div>
<div id="text2" class="decoration"> Hello World! </div>
<div id="text3" class="decoration"> JavaScript is Awesome! </div>
</div>
<script>
// all decorated text
const text1 = document.getElementById('text1')
const text2 = document.getElementById('text2')
const text3 = document.getElementById('text3')
// 'Set Text-Decoration Color' button click event handler function
function setTextDecorationColor() {
// set the color of the text-decoration using the style.textDecorationColor property
text1.style.textDecorationColor = 'red'
text2.style.textDecorationColor = 'green'
text3.style.textDecorationColor = 'blue'
}
</script>
</body>
</html>
Using the style.setProperty Method
In JavaScript, the style.setProperty method sets a new or existing property of an element. To set the color of the text-decoration using the style.setProperty method, firstly, the document.getElementById() method is used to access the element and then set the text-decoration color using the style.setProperty method.
Syntax
const object = document.getElementById('element_id')
object.style.setProperty(property_name, value, priority)
Here, 'element_id' is the id of an HTML element. Using the document.getElementById() method, we are accessing the element object and using the style.setProperty method. The property name parameter should be 'text-decoration-color', and the value and priority will be as per users.
Parameters
property_name ? The name of the property to be set.
value ? The new value of the property.
priority ? The priority of the property value (Optional).
Example
In the below example, we have used the style.setProperty method to set the color of the text-decoration with JavaScript. We have used a select box to take the user's input for the color of the text-decoration and set that color to the element's text-decoration using a button click event. The button "Set Text-Decoration Color" click event executes the "setTextDecorationColor()" function that sets the color of text-decoration to the user-selected color.
<html>
<head>
<style>
.decoration {
text-decoration: underline;
padding: 10px;
margin: 5px 0px;
background-color: rgb(220 252 243);
}
</style>
</head>
<body>
<h2> Using <i> style.setProperty </i> method with JavaScript </h2>
<p> Select the text-decoration color: </p>
<select name="color" id="color">
<option value="red"> Red </option>
<option value="green"> Green </option>
<option value="yellow"> Yellow </option>
<option value="blue"> Blue </option>
</select>
<button onclick="setTextDecorationColor()"> Set Text-Decoration Color </button>
<div id="root" class="decoration"> Welcome to Tutorialspoint! </div>
<script>
// 'Set Text-Decoration Color' button click event handler function
function setTextDecorationColor() {
const root = document.getElementById('root')
// select box color value
const color = document.getElementById('color').value
// set the color of the text-decoration using the style.setProperty method
root.style.setProperty('text-decoration-color', color)
}
</script>
</body>
</html>
Comparison of Methods
| Method | Direct Property Access | Flexibility | Priority Support |
|---|---|---|---|
style.textDecorationColor |
Yes | Good | No |
style.setProperty() |
No | Better | Yes |
Conclusion
Both style.textDecorationColor and style.setProperty() methods effectively set text decoration colors. Use the direct property for simple cases, or setProperty when you need priority control or dynamic property names.
1K+ Views
