In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > textDecorationUnderline

textDecorationUnderline property

Browser support:

Sets or returns a Boolean value that indicates whether the element is displayed with a line at the bottom, or not.

To set the decoration of text, use the textDecoration style property.

Syntax:

object.textDecorationUnderline;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

Boolean that indicates the state of text underlining.

One of the following values:

false

No line is drawn immediately below the text.

true

A line is drawn immediately below the text.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the textDecorationUnderline property:

<head>
    <script type="text/javascript">
        function ChangeDecor (propIdx){
            var div = document.getElementById ("myDiv");
            if (propIdx < 5 && div.style.textDecorationNone) {
                div.style.textDecorationNone = false;
                document.getElementsByTagName ("INPUT")[4].checked = false;
            }
            switch (propIdx){
            case 1:
                div.style.textDecorationBlink = !div.style.textDecorationBlink;
                break;
            case 2:
                div.style.textDecorationLineThrough = !div.style.textDecorationLineThrough;
                break;
            case 3:
                div.style.textDecorationOverline = !div.style.textDecorationOverline;
                break;
            case 4:
                div.style.textDecorationUnderline = !div.style.textDecorationUnderline;
                break;
            case 5:
                div.style.textDecorationNone = !div.style.textDecorationNone;
                if (div.style.textDecorationNone) {
                    for (i = 0; i < 4; i++) {
                        document.getElementsByTagName ("INPUT")[i].checked = false;
                    }
                }
                break;
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">Change the decoration of this text with the checkBoxes below.</div>

    <input type="checkbox" onclick="ChangeDecor (1);"/>
     textDecorationBlink
    <br />

    <input type="checkbox" onclick="ChangeDecor (2);"/>
     textDecorationLineThrough
    <br />

    <input type="checkbox" onclick="ChangeDecor (3);"/>
     textDecorationOverline : 
    <br />

    <input type="checkbox" onclick="ChangeDecor (4);"/>
     textDecorationUnderline : 
    <br />

    <input type="checkbox" onclick="ChangeDecor (5);"/>
     textDecorationNone
</body>