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

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

textUnderlinePosition style property

Browser support:

Specifies or returns the position of the underline decoration.

This property offers a refinement for underlined text content.

For a cross-browser solution, use textDecoration property to change whether the element is underlined or overlined.

The textUnderlinePosition property has effect only if the value of the textDecoration property is set to 'underline'.

Syntax:

object.textUnderlinePosition;

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

This property is read/write.

CSS page for this property: text-underline-position

Possible values:

The type of this property is string.

One of the following values:

above

Underline is above the text.

auto

Underline is below the text, or above if lang property is set to 'ja' (japanese) and writingMode property is set to 'tb-rl'.

auto-pos

Same as auto. IE6 and later.

below

Underline is below the text.

Default: auto.

Example HTML code 1:

This example illustrates the use of the text-underline-position property:

<head>
    <style>
        .example {
            text-decoration: underline;
            text-underline-position: above;
        }
    </style>
</head>
<body>
    <p id="sample" class="example">text underline position</p>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the textUnderlinePosition property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeUnderPos (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var underLineValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
 
            if ('textUnderlinePosition' in div.style) {
                div.style.textUnderlinePosition = underLineValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="text-decoration: underline;">Change text-underline-position</div>

    <br />
    <select size="3" onchange="ChangeUnderPos (this);">
        <option />above
        <option />below
        <option selected="selected" />auto
    </select>
</body>