The HTML DOM Style listStyletype property is used for setting or returning the list-item marker type.
Following is the syntax for −
Setting the listStyleType property −
object.style.listStyleType = value
Some of the listStyleType property values are −
| Value | Description |
|---|---|
| armenian | Setsthe marker to traditional Armenian numbers. |
| circle | Circleas marker. |
| cjk-ideographic | Setsplain ideographic numbers as marker. |
| decimal | Thissets the marker number and is the default value.. |
| decimal-leading-zero | Addsa 0 before the numbers set as marker. |
| disc | Defaultfor <ul> and the marker is the filled circle. |
| hiragana | Setstraditional hiragana numbering as marker. |
| katakana | Setsthe traditional Katakana numbering as marker. |
| lower-alpha | Setsthe marker as lower alphabet. |
| lower-greek | Setsthe lower-greek characters as marker. |
| none | Displaysno marker. |
| square | Displaysmarker as a square. |
| upper-alpha | Setsuppercase letters as marker. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the listStyleType property −
Example
<!DOCTYPE html>
<html>
<head>
<script>
function changeListType() {
document.getElementById("LIST1").style.listStyleType = "upper-roman";
document.getElementById("Sample").innerHTML=" The list style type is now set to uppercase roman numeral";
}
</script>
</head>
<body>
<ul id="LIST1">
<li>LIST ITEM1</li>
<li>LIST ITEM2</li>
<li>LIST ITEM3</li>
<li>LIST ITEM4</li>
</ul>
<p>Change the above list style type by clicking the below button</p>
<button type="button" onclick="changeListType()">Change List Type</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change list style” button −
