HTML - DOM Style Object textDecorationStyle Property

Quiz

HTML DOM Style Object textDecorationStyle property sets or returns the style of text decoration line like it can be displayed as solid, dashed, dotted or wavy.

Syntax

Set the textDecorationStyle property:

object.style.textDecorationStyle= "solid | double | dotted | dashed | wavy | initial | inherit";

Get the textDecorationStyle property:

object.style.textDecorationStyle;

Property Values

Value	Description
solid	It is the default value which displays a solid line.
double	It displays a double line.
dotted	It displays a dotted line.
dashed	It displays a dashed line.
wavy	It displays a wavy line.
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 text decoration style property of an element.

Examples of HTML DOM Style Object 'textDecorationStyle' Property

The following examples sets text decoration style property to a p element.

Set textDecorationStyle to 'double' and 'dotted'

The following example sets the text decoration style of a p element to double line and dotted line.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textDecorationStyle Property
    </title>
    <style>
        #decorstyle {
            text-decoration: overline green;
        }
    </style>
</head>
<body>
    <p>
        Click to change text decoration styles.
    </p>
    <button onclick="fun()">Double</button>
    <button onclick="funTwo()">Dotted</button>
    <p id="decorstyle">
        Welcome to Tutorials Point
    </p>
    <script>
        function fun() {
            document.getElementById("decorstyle")
                .style.textDecorationStyle = "double";
        }
        function funTwo() {
            document.getElementById("decorstyle")
                .style.textDecorationStyle = "dotted";
        }
    </script>
</body>
</html>

Set textDecorationStyle to 'dashed' and 'wavy'

The following example sets the text decoration style of a p element to dashed line and wavy line.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textDecorationStyle Property
    </title>
    <style>
        #decorstyle {
            text-decoration: overline green;
        }
    </style>
</head>
<body>
    <p>
        Click to change text decoration styles.
    </p>
    <button onclick="fun()">Dashed</button>
    <button onclick="funTwo()">Wavy</button>
    <p id="decorstyle">
        Welcome to Tutorials Point
    </p>
    <script>
        function fun() {
            document.getElementById("decorstyle")
                .style.textDecorationStyle = "dashed";
        }
        function funTwo() {
            document.getElementById("decorstyle")
                .style.textDecorationStyle = "wavy";
        }
    </script>
</body>
</html>

Supported Browsers

Property
textDecorationStyle	Yes 57	Yes 79	Yes 36	Yes 12.1	Yes 44

html_dom.htm

Print Page