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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content