Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 “setRuleColor()” 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>
In this tutorial, we learned how to set the color of the text-decoration with JavaScript. We have used the style.textDecorationColor property and the style.setProperty method to set the color of the text-decoration. Users can follow any one of the approaches to set the text-decoration color.
700 Views
