HTML - DOM Style Object textDecoration Property

Quiz

HTML DOM Style Object textDecoration property is a short-hand property for setting the textDecorationLine, textDecorationStyle, and the textDecorationColor properties.

Syntax

Set the textDecoration property:

object.style.textDecoration= "text-decoration-color text-decoration-line text-decoration-style | initial | inherit"

Get the textDecoration property:

object.style.textDecoration;

Property Values

Value	Description
color	It sets text decoration color.
line	It sets the type of text decoration line to be used.
style	It sets text decoration style.
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 the textDecoration properties of an element like text-decoration-color, text-decoration-line and text-decoration-style.

Example of HTML DOM Style Object 'textDecoration' Property

The following example sets the textDecoration property for a p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textDecoration Property
    </title>
</head>
<body>
    <p>Click to change text decoration.</p>
    <button onclick="fun()">Underline</button>
    <button onclick="funTwo()">Overline</button>
    <div id="decor">
        <p>
            See the effects here.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("decor")
                .style.textDecoration = "underline solid red"
        }
        function funTwo() {
            document.getElementById("decor")
                .style.textDecoration = "overline double green"
        }
    </script>
</body>
</html>

Supported Browsers

Property
textDecoration	Yes 1	Yes 12	Yes 1	Yes 1	Yes 12.1

html_dom.htm

Print Page