How to set the color of the text-decoration with JavaScript?

Javascript Web Development Front End Technology

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.