Skip to content
Related Articles

Related Articles

HTML | DOM Style listStylePosition Property
  • Last Updated : 01 Aug, 2019
GeeksforGeeks - Summer Carnival Banner

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:

ValueDescription
outsideThis is default and specifies that list-item marker will be rendered before any text content.
insideThis indents the list-item marker.
initialThis sets this property to its default value.
inheritThis inherits this property from its parent element.

Example-1: Use of “inside” value.






<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM Style listStylePosition Property
    </title>
    <style>
        li {
            background-color: lightgreen;
        }
          
        div {
            padding: 20px;
            width: 70%;
            heinght: 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.




<!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
    • Edge
    • Mozilla Firefox
    • Opera
    • Safari

    full-stack-img

    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :