Skip to content
Related Articles

Related Articles

HTML | DOM Style listStyleType Property

Improve Article
Save Article
  • Last Updated : 14 Jul, 2022
Improve Article
Save Article

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>   


Output:

  • Before Clicking the button:
  • After clicking the button

Supported Browsers: The browser supported by HTML | DOM Style listStyleType Property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 4 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Apple Safari 1 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!