HTML | DOM Style listStyleType Property
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
Please Login to comment...