Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style listStyleType Property

  • Last Updated : 01 Aug, 2019

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"

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”.






<!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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :