Javascript Reference - HTML DOM Ol start Property

The start attribute in CSS specifies the start value of the first list item in an ordered list.

The start property sets or gets the start attribute for an ordered list.

Browser Support

The start property is supported in all major browsers.


`start`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the start property.

var v = olObject.start

Set the start property.

olObject.start=number

Property Values

Value	Description
number	Set the start value of the first item in the ordered list

Return Value

A Number type value representing the start value of the first list item in the ordered list.

Example

The following code shows how to Set the start value of the ordered list to "5".


<!DOCTYPE html>
<html>
<body>
<!--  w  ww .java 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").start = "5";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the value of the first list item in the ordered list.


<!DOCTYPE html>
<html>
<body>
<!--   w  w w.  j av  a 2  s .co m-->
<ol id="myOl" start="50">
  <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").start;
    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 start value of the ordered list to "5", when using roman numbers with type="I".


<!DOCTYPE html>
<html>
<body>
<!--from   w  w  w  .java2 s  .  c  om-->
<ol id="myOl" type="I">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<button onclick="myFunction()">test</button>

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

</body>
</html>

The code above is rendered as follows: