HTML DOM Style textDecorationColor Property


The DOM style textDecorationColor property returns and modify the color of the text decoration of an element in an HTML document.

Syntax

Following is the syntax −

  • Returning textDecorationColor

object.style.textDecorationColor
  • Modifying textDecorationColor

object.style.textDecorationColor = “color”

Example

Let us see an example of style textDecorationColor property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      margin: 1.5rem auto;
      text-decoration: line-through;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM Style textDecorationColor Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</p>
<button onclick="add()" class="btn">Change textDecorationColor</button>
<script>
   function add() {
      document.querySelector('p').style.textDecorationColor = "#db133a";
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Change textDecorationColor” button to change the color of the line through paragraph text.

Updated on: 01-Jul-2020

26 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements