HTML - DOM Style Object textDecorationLine Property

HTML DOM Style Object textDecorationLine property is used for specifying the type of line the decoration will have. More than one property value can be specified using space separated list of text decoration line values.

Syntax

Set the textDecorationLine property:

object.style.textDecorationLine= "none | underline | overline | line-through | blink | initial | inherit";

Get the textDecorationLine property:

object.style.textDecorationLine;

Property Values

Value	Description
none	It is the default value which represents a normal text.
underline	It specifies an underlined text.
overline	It specifies a line above the text.
line-through	It specifies a line through the text.
blink	It makes the text blink at regular intervals, however this value is not supported in many modern web browsers.
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 line property of an element.

Example of HTML DOM Style Object 'textDecorationLine' Property

The following example sets different text decoration line values to p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textDecorationLine Property
    </title>
</head>
<body>
    <p>Click to change text decoration.</p>
    <button onclick="fun()">Underline</button>
    <button onclick="funTwo()">Overline</button>
    <button onclick="funThree()">Line through</button>
    <button onclick="funFour()">None</button>
    <div id="decor">
        <p>
            See the effects here.
        </p>
    </div>
    <script>
        function fun() {
            document.getElementById("decor")
                .style.textDecorationLine = "underline"
        }
        function funTwo() {
            document.getElementById("decor")
                .style.textDecorationLine = "overline"
        }
        function funThree() {
            document.getElementById("decor")
                .style.textDecorationLine = "line-through"
        }  
        function funFour() {
            document.getElementById("decor")
                .style.textDecorationLine = "none"
        }      
    </script>
</body>
</html>

Supported Browsers

Property
textDecorationLine	Yes 57	Yes 79	Yes 36	Yes 12.1	Yes 44

html_dom.htm

Print Page