listStyleType Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:listStyleType

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. listStyleType

Description

The listStyleType property sets or gets the list-item marker type.

Property Values

ValueDescription
armenian Armenian numbering
circle a circle
cjk-ideographic plain ideographic numbers
decimal a number. This is default for <ol>
decimal-leading-zero a number with leading zeros (01, 02, 03, etc.)
disc a filled circle. This is default for <ul>
georgian Georgian numbering
hebrew Hebrew numbering
hiragana Hiragana numbering
hiragana-iroha Hiragana iroha numbering
katakana Katakana numbering
katakana-iroha Katakana iroha numbering
lower-alpha lower-alpha (a, b, c, d, e, etc.)
lower-greek lower-greek
lower-latin lower-latin (a, b, c, d, e, etc.)
lower-roman lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square a square
upper-alpha upper-alpha (A, B, C, D, E, etc.)?
upper-latin upper-latin (A, B, C, D, E, etc.)
upper-roman upper-roman (I, II, III, IV, V, etc.)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: "disc" for <ul> and "decimal" for <ol>
Return Value: A String, representing the type of a list
CSS VersionCSS1

Change the list-item marker type to "upper-roman":

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<ul id="myList" style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Soda</li>
</ul>// ww w . j  ava  2 s.co  m

<button type="button" onclick="myFunction()">Test</button>

<script>
function myFunction() {
    document.getElementById("myList").style.listStyleType = 'upper-roman';
}
</script>

</body>
</html>

Related Tutorials