Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the list-item marker type with JavaScript?

Javascript Web Development Front End Scripts

To set the type of the list-item marker, use the listStyleType property in JavaScript. This property allows you to change bullet styles for unordered lists and numbering styles for ordered lists.

Syntax

element.style.listStyleType = "value";

Common List Style Types

Here are the most commonly used marker types:

Value Description Best for
disc Filled circle (default) Unordered lists
circle Empty circle Unordered lists
square Filled square Unordered lists
decimal Numbers (1, 2, 3...) Ordered lists
upper-roman Uppercase Roman (I, II, III...) Ordered lists
lower-alpha Lowercase letters (a, b, c...) Ordered lists

Example: Changing List Marker Types

<!DOCTYPE html>
<html>
<body>
    <ul id="myList">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    
    <button onclick="setSquare()">Square Markers</button>
    <button onclick="setCircle()">Circle Markers</button>
    <button onclick="setDecimal()">Decimal Markers</button>
    
    <script>
        function setSquare() {
            document.getElementById("myList").style.listStyleType = "square";
        }
        
        function setCircle() {
            document.getElementById("myList").style.listStyleType = "circle";
        }
        
        function setDecimal() {
            document.getElementById("myList").style.listStyleType = "decimal";
        }
    </script>
</body>
</html>

Example: Multiple Lists with Different Styles

<!DOCTYPE html>
<html>
<body>
    <ul id="list1">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
    
    <ol id="list2">
        <li>Step one</li>
        <li>Step two</li>
    </ol>
    
    <button onclick="styleLists()">Apply Custom Styles</button>
    
    <script>
        function styleLists() {
            // Set unordered list to use square markers
            document.getElementById("list1").style.listStyleType = "square";
            
            // Set ordered list to use uppercase Roman numerals
            document.getElementById("list2").style.listStyleType = "upper-roman";
        }
    </script>
</body>
</html>

Removing List Markers

You can also remove markers entirely by setting the value to none:

<!DOCTYPE html>
<html>
<body>
    <ul id="noMarkers">
        <li>Item without marker</li>
        <li>Another item</li>
    </ul>
    
    <button onclick="removeMarkers()">Remove Markers</button>
    <button onclick="restoreMarkers()">Restore Markers</button>
    
    <script>
        function removeMarkers() {
            document.getElementById("noMarkers").style.listStyleType = "none";
        }
        
        function restoreMarkers() {
            document.getElementById("noMarkers").style.listStyleType = "disc";
        }
    </script>
</body>
</html>

Key Points

  • Use listStyleType property to change list markers dynamically
  • Works with both <ul> and <ol> elements
  • Common values include disc, circle, square, decimal, and none
  • Changes apply immediately when the property is set

Conclusion

The listStyleType property provides an easy way to customize list markers with JavaScript. Use it to enhance the visual presentation of your lists by choosing appropriate marker styles for different content types.

Updated on: 2026-03-15T23:18:59+05:30

529 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements