The list-style-type property sets the counting (or bullet) style used in the marker for a list item.
Here are the values which can be used for an unordered list −
Sr.No. | Value & Description |
---|---|
1 | none NA |
2 | disc (default) A filled-in circle |
3 | circle An empty circle |
4 | square A filled-in square |
Here are the values which can be used for an ordered list −
Value | Description | Example |
---|---|---|
decimal | Number | 1,2,3,4,5 |
decimal-leading-zero | 0 before the number | 01, 02, 03, 04, 05 |
lower-alpha | Lowercase alphanumeric characters | a, b, c, d, e |
upper-alpha | Uppercase alphanumeric characters | A, B, C, D, E |
lower-roman | Lowercase Roman numerals | i, ii, iii, iv, v |
upper-roman | Uppercase Roman numerals | I, II, III, IV, V |
lower-greek | The marker is lower-greek | alpha, beta, gamma |
lower-latin | The marker is lower-latin | a, b, c, d, e |
upper-latin | The marker is upper-latin | A, B, C, D, E |
hebrew | The marker is traditional Hebrew numbering | |
armenian | The marker is traditional Armenian numbering | |
georgian | The marker is traditional Georgian numbering | |
cjk-ideographic | The marker is plain ideographic numbers | |
hiragana | The marker is hiragana | a, i, u, e, o, ka, ki |
katakana | The marker is katakana | A, I, U, E, O, KA, KI |
hiragana-iroha | The marker is hiragana-iroha | i, ro, ha, ni, ho, he, to |
katakana-iroha | The marker is katakana-iroha | I, RO, HA, NI, HO, HE, TO |
All the elements with a display of list-item.
object.style.listStyleType = "decimal"
Here is the example −
<html> <head> </head> <body> <ul style = "list-style-type:circle;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ul style = "list-style-type:square;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ul> <ol style = "list-style-type:decimal;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-alpha;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> <ol style = "list-style-type:lower-roman;"> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol> </body> </html>
This will produce following result −
44 Lectures 4.5 hours
21 Lectures 2.5 hours
51 Lectures 7.5 hours
52 Lectures 4 hours