Javascript Reference - HTML DOM Ol type Property

The type attribute in CSS specifies the marker type in the list, letters or numbers.

The type property sets or gets the type attribute of an ordered list.

Browser Support

The type property is supported in all major browsers.


`type`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the type property.

var v = olObject.type

Set the type property.

olObject.type='1|a|A|i|I'

Property Values

Value	Description
1	Default. Decimal numbers (1, 2, 3, 4)
a	Alphabetically ordered list, lowercase, for example a, b, c, d
A	Alphabetically ordered list, uppercase, for example A, B, C, D
i	Roman numbers, lowercase (i, ii, iii, iv)
I	Roman numbers, uppercase (I, II, III, IV)

Return Value

A String, representing the marker type used in the ordered list.

Example

The following code shows how to set the ordered list to use lowercase alphabetical letters.


<!DOCTYPE html>
<html>
<body>
<!--from  www .j  a  v a2 s .  c  om-->
<ol id="myOl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myOl").type = "a";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the marker type used in an ordered list.


<!DOCTYPE html>
<html>
<body>
<!--from ww w  .ja  v a2 s  .  c  o m-->
<ol id="myOl" type="I">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myOl").type;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to set the ordered list to use uppercase alphabetical letters.


<!DOCTYPE html>
<html>
<body>
<!-- w ww  . jav a 2s .c o  m-->
<ol id="myOl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myOl").type = "A";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set the ordered list to use lowercase roman numbers.


<!DOCTYPE html>
<html>
<body>
<!--from   ww w  .  j  a  va 2 s . com-->
<ol id="myOl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myOl").type = "i";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to set the ordered list to use uppercase roman numbers.


<!DOCTYPE html>
<html>
<body>
<!--from  w  w w.  j av a 2  s  .c o m-->
<ol id="myOl">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myOl").type = "I";
}
</script>

</body>
</html>

The code above is rendered as follows: