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

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content