Style listStyleTypeProperty
Style Object
Definition and Usage
The listStyleType property sets or returns the type of the list item marker.
Syntax
Set the listStyleType property:
Object.style.listStyleType="value"
Return the listStyleType property:
Object.style.listStyleType
| Value | Description |
|---|---|
| armenian | The marker is traditional Armenian numbering. |
| circle | The marker is an open circle. |
| cjk-ideographic | The marker is a plain ideographic number. |
| decimal | The marker is a number. This is the default value for <ol>. |
| decimal-leading-zero | The marker is a number with a leading zero (01, 02, 03, etc.) |
| disc | The marker is a solid circle. This is the default value for <ul>. |
| georgian | The marker is traditional Georgian numbering. |
| hebrew | The marker is traditional Hebrew numbering. |
| hiragana | The marker is traditional Hiragana numbering (a, i, u, e, o, ka, ki, etc.). |
| hiragana-iroha | The marker is traditional Hiragana iroha numbering (i, ro, ha, ni, ho, he, to, etc.). |
| inherit | The value of the listStyleType property is inherited from the parent element. |
| katakana | The marker is traditional Katakana numbering (A, I, U, E, O, KA, KI, etc.). |
| katakana-iroha | The marker is traditional Katakana iroha numbering (I, RO, HA, NI, HO, HE, TO, etc.). |
| lower-alpha | The marker is lowercase English letters (a, b, c, d, e, etc.). |
| lower-greek | The marker is lowercase Greek letters (alpha, beta, gamma, etc.). |
| lower-latin | The marker is lowercase Latin letters (a, b, c, d, e, etc.). |
| lower-roman | The marker is lowercase Roman numerals (i, ii, iii, iv, v, etc.). |
| none | No marker is shown. |
| square | The marker is a solid square. |
| upper-alpha | The marker is uppercase English letters (A, B, C, D, E, etc.). |
| upper-latin | The marker is uppercase Latin letters (A, B, C, D, E, etc.). |
| upper-roman | The marker is uppercase Roman numerals (I, II, III, IV, V, etc.). |
Browser Support
All major browsers support the listStyleType property.
Note:Property values not supported by IE9 and Opera 11: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.
Note:IE8, if a !DOCTYPE is specified, only supports the property values: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, and inherit.
Examples
Example
Change the type of list item marker:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("ul1").style.listStyleType="square";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<br>
<button type="button" onclick="displayResult()">Change the list item marker type</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("ul1").style.listStyleType="square";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<br>
<button type="button" onclick="displayResult()">Change the list item marker type</button>
</body>
</html>
Try it Yourself »
More Examples
All different list style types
View all the different list style types.
Style Object Other Extensions