Javascript DOM CSS Style listStyleType Property

Introduction

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

document.getElementById("myList").style.listStyleType = "upper-roman";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>CSS</li>
  <li>HTML</li>
  <li>SQL</li>
  <li>C++</li>
</ul>/* w  w w  .jav a  2 s .c  om*/

<button type="button" onclick="myFunction()">Change list-item marker type</button>

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

</body>
</html>

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

Property Values

ValueDescription
armenian traditional 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.

The listStyleType property Default Value

  • "disc" for <ul>
  • "decimal" for <ol>

The listStyleType property returns a String representing the type of a list.




PreviousNext

Related