HTML - DOM Style Object textDecorationColor Property

Quiz

HTML DOM Style Object textDecorationColor property sets or returns the color of text decoration like overline, underline and line-through.

Syntax

Set the textDecorationColor property:

object.style.textDecorationColor= "color | initial | inherit";

Get the textDecorationColor property:

object.style.textDecorationColor;

Property Values

Value	Description
color	It specifies the color of text decoration.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents text decoration color of the element.

Example of HTML DOM Style Object 'textDecorationColor' Property

The following example sets the line-through value in three different color.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textDecorationColor Property
    </title>
    <style>
        #decorcolor {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p>
        Click to change color of text decoration.
    </p>
    <button onclick="green()">Green</button>
    <button onclick="red()">red</button>
    <button onclick="yellow()">Yellow</button>
    <p id="decorcolor">
        Welcome to Tutorials Point
    </p>
    <script>
        function green() {
            document.getElementById("decorcolor")
                .style.textDecorationColor = "#04af2f";
        }
        function red() {
            document.getElementById("decorcolor")
                .style.textDecorationColor = "red";
        }
        function yellow() {
            document.getElementById("decorcolor")
                .style.textDecorationColor = "yellow";
        }
    </script>
</body>
</html>

Supported Browsers

Property
textDecorationColor	Yes 57	Yes 79	Yes 36	Yes 12.1	Yes 44

html_dom.htm

Print Page