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.

<!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

My Personal Notes

Recommended Posts: