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

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

listStylePosition style property

Browser support:

Specifies or returns whether the list marker for a list item should appear inside or outside the list-item box.

Syntax:

object.listStylePosition;

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

This property is read/write.

CSS page for this property: list-style-position

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

inside

List-marker is inside the text, and wrapped text content will be rendered at an indentation level similar to the marker.

outside

Default. The list-marker will be rendered before any text content.

Default: outside.

Example HTML code 1:

This example illustrates the use of the list-style-position property:

<body>
    <ol style="list-style-position: inside;">
        <li>inside
        <li>list
        <li>position
    </ol>

    <ol style="list-style-position: outside;">
        <li>outside
        <li>list
        <li>position
    </ol>
</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 listStylePosition property in JavaScript:

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

            // Returns the selected options values
            var listValue = selectTag.options[whichSelected].text;

            var oList = document.getElementById ("myOlist");
            oList.style.listStylePosition = listValue;
        }
    </script>
</head>
<body>
    <ol id="myOlist">
        <li>Apple
        <li>Pear
        <li>Peach
    </ol>

    <br />
    <select onchange="ChangeListStyle (this);" size="2">
        <option />inside
        <option selected="selected" />outside
    </select>
</body>