HTML | DOM Style listStyleType Property

Last Updated : 14 Jul, 2022

The Style listStyleType property is used for setting or returning the list-item marker type. It has default values as “disc” for <ul> and “decimal” for <ol> and returns a string which represents the type of the list.

Syntax :

To get the property:

object.style.listStyleType

To set the property:

object.style.listStyleType = value"

Return Values: It returns a string value, that represents the type of a list

Property Values:

armenian: It is used to represent the marker in traditional Armenian numbering.
circle: It is used to represent the marker in a circle.
decimal: It is used to represent the marker in decimal format.
lower-alpha: It is used to represent the marker in lower-alpha (a, b, c, d, e, etc).
lower-roman: It is used to represent the marker in lower-roman (i, ii, iii, iv, v, etc).

Below program illustrates the Style listStyleType property method :

Example: Changing the list-item marker type to “lower-alpha”.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Style listStyleType Property in HTML</title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>Style listStyleType Property</h2>
    <br>
 
    <b>Geeksforgeeks offers the following courses :</b>
 
    <ul id="courses">
        <li>Fork Python</li>
        <li>Fork CPP</li>
        <li>Sudo Placement</li>
        <li>Fork Java</li>
    </ul>
 
    <p>For changing list-item marker, 
      double click the 
      "Change list-item marker to lower alpha" 
      button: </p>
    <br>
 
    <button type="button" ondblclick="list()">
        Change list-item marker to lower alpha
    </button>
 
    <script>
        function list() {
            document.getElementById("courses")
                .style.listStyleType = "lower-alpha";
        }
    </script>
 
</body>
 
</html>    