HTML DOM Style listStyleType Property
Last Updated :
22 Apr, 2024
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>
Output:
Supported Browsers
- 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...