HTML | DOM Style listStylePosition Property

The DOM Style listStylePosition property sets or returns the position of the list-item marker.

Syntax :

For set the listStylePosition property:

object.style.listStylePosition = value

For return the listStylePosition property:

object.style.listStylePosition

Return Value: This return a String that representing the position of the list-item marker.

Values:

Value	Description
outside	This is default and specifies that list-item marker will be rendered before any text content.
inside	This indents the list-item marker.
initial	This sets this property to its default value.
inherit	This inherits this property from its parent element.

Example-1: Use of "inside" value.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style listStylePosition Property
    </title>
    <style>
        li {
            background-color: lightgreen;
        }
        
        div {
            padding: 20px;
            width: 70%;
            height: 40%;
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div>
        <p>Welcome to GeekforGeeks.!</p>

        <ul id="mainUL">
            <li>item_1</li>
            <li>item_2</li>
            <li>item_3</li>
        </ul>
    </div>
    <br>
  
    <input type="button" value="click Me.!" 
           onclick="mainFunction()" />

    <script>
        function mainFunction() {
          
            //  set position 'inside'
            document.getElementById(
              "mainUL").style.listStylePosition = "inside";
        }
    </script>

</body>

</html>

Output:

Before click:

After Click:

Example-2: Use of "outside" value. Since this is default value so we can check by simply return The list-style-position property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style listStylePosition Property
    </title>
    <style>
        div {
            padding: 20px;
            width: 70%;
            height: 40%;
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div>
        <p>Welcome to GeekforGeeks.!</p>

      
        <!--  set position 'outside'  -->
        <ul id="mainList" 
            style="list-style-position:outside;">
            <li>item_1</li>
            <li>item_2</li>
            <li>item_3</li>
        </ul>

        <br>
        <input type="button" value="click Me.!" 
               onclick="mainFunction()" />
    </div>
  
    <script>
        function mainFunction() {
          
            //  Return position using alert.
            alert(document.getElementById(
              "mainList").style.listStylePosition);
        }
    </script>

</body>

</html>

Output:

Before click:

After click:

Supported Browsers: The browser supported by HTML | DOM Style listStylePosition Property are listed below:

Google Chrome 1
Edge 12
Mozilla Firefox 1
Internet Explorer 4
Opera 3.5
Safari 1

HTML | DOM Style listStylePosition Property

Explore