HTML DOM Style listStyleType Property

The HTML DOM Style listStyleType property is used to set or return the list-item marker type. It has default values as "disc" for <ul> and "decimal" for <ol> and returns a string that represents the type of the list.

Syntax

Returns the listStyleType property.

object.style.listStyleType

Set the listStyleType 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).

Example: In this example, we will change the list-item marker type to "lower-alpha".

html

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Style listStyleType Property</title>
</head>

<body>
    <h2>HTML DOM Style listStyleType Property</h2>

    <b>Geeksforgeeks Courses:</b>

    <ul id="courses">
        <li>Fork Python</li>
        <li>Fork CPP</li>
        <li>Sudo Placement</li>
        <li>Fork Java</li>
    </ul>

    <button onclick="myFunction()">
        Change list-item marker to lower alphabet
    </button>

    <script>
        function myFunction() {
            document.getElementById("courses").style
                .listStyleType = "lower-alpha";
        }
    </script>
</body>

</html>