Open In App

HTML | DOM Style listStylePosition Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads