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.


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: 
Takes the value of this property from the computed style of the parent element.
List-marker is inside the text, and wrapped text content will be rendered at an indentation level similar to the marker.
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:
    <ol style="list-style-position: inside;">

    <ol style="list-style-position: outside;">
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the listStylePosition property in JavaScript:
    <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");
   = listValue;
    <ol id="myOlist">

    <br />
    <select onchange="ChangeListStyle (this);" size="2">
        <option />inside
        <option selected="selected" />outside
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content