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.


Advertisements