Easy Tutorial
❮ Prop Style Animation Met Node Clonenode ❯

listStyleType Property


Definition and Usage

The listStyleType property sets or returns the type of list item marker.

Syntax

Set listStyleType property:

Return listStyleType property:

Value Description
armenian The marker is traditional Armenian numbering.
circle The marker is an open circle.
cjk-ideographic The marker is plain ideographic numbers.
decimal The marker is decimal numbers. This is the default value for <ol>.
decimal-leading-zero The marker is decimal numbers with leading zeros (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 ASCII 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 ASCII 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: IE9 and Opera 11 do not support the following property values: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

Note: IE8 only supports the following property values if !DOCTYPE is specified: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, and inherit.


Example

Change the type of list item marker:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</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()">Modify the marker type of list items</button>

</body>
</html>

More Examples

All different list style types


❮ Prop Style Animation Met Node Clonenode ❯