Javascript Reference - HTML DOM Style listStyleType Property

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

Browser Support


`listStyleType`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the listStyleType property:

var v = object.style.listStyleType

Set the listStyleType property:

object.style.listStyleType=value;

Property Values

Value	Description
armenian	Armenian numbering
circle	circle marker
cjk-ideographic	ideographic numbers
decimal	number marker. Default for <ol>
decimal-leading-zero	a number with leading zeros
disc	filled circle marker. Fefault for <ul>
georgian	Georgian numbering
lower-alpha	Lower-alpha marker, such as a, b, c, d, e, etc.
lower-greek	lower-greek marker
lower-latin	lower-latin marker such as a, b, c, d, e, etc.
lower-roman	lower-roman marker such as i, ii, iii, iv, v, etc.
none	No marker
square	square marker
upper-alpha	upper-alpha marker such as A, B, C, D, E, etc.
upper-latin	upper-latin marker such as A, B, C, D, E, etc.
upper-roman	upper-roman marker such as I, II, III, IV, V, etc.
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	"disc" for <ul> and "decimal" for <ol>
Return Value:	A string representing the list item type
CSS Version	CSS1

Example

The following code shows how to change the list-item marker type


<!DOCTYPE html>
<html>
<body>
<ul id="myList">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>S</li>
</ul><!--  w w  w .j  a  v  a  2  s .c o m-->
<button type="button" onclick="myFunction()">test</button> 
<script>
function myFunction() {
    document.getElementById("myList").style.listStyleType = "upper-roman";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

All the different list style types:


<!DOCTYPE html>
<html>
<body>
<!--from   w  ww.j a v  a 2 s.  c om-->
<ol id="myList">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ol>
<br>

<select onchange="myFunction(this);" size="22">
  <option>armenian</option>
  <option>circle</option>
  <option>cjk-ideographic</option>
  <option>decimal</option>
  <option>decimal-leading-zero</option>
  <option>disc</option>
  <option>georgian</option>
  <option>hebrew</option>
  <option>inherit</option>
  <option>lower-alpha</option>
  <option>lower-greek</option>
  <option>lower-latin</option>
  <option>lower-roman</option>
  <option>none</option>
  <option>square</option>
  <option>upper-alpha</option>
  <option>upper-latin</option>
  <option>upper-roman</option>
</select>

<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myList").style.listStyleType = listValue;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the list item marker type.


<!DOCTYPE html>
<html>
<body>
<ul id="myList" style="list-style-type:circle;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul><!--   ww  w.j  a  v  a2 s.c  o m-->
<button type="button" onclick="myFunction()">test</button>
 <script>
function myFunction() {
    console.log(document.getElementById("myList").style.listStyleType);
}
</script>

</body>
</html>

The code above is rendered as follows: