Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Ol type Property

  • Last Updated : 24 Jun, 2021

The DOM Ol type Property is used to set or return the type attribute in an ordered list. This attribute defines which type(1, A, a, I and i) of order you want in your list numeric, alphabetic or roman numbers.

Syntax:.
Syntax: 
 

  • It is used to return the type property. 
     
olObject.type
  • It is used to set the type property. 
     
olObject.type = "1|a|A|i|I"

Property Values: 
 

  • 1: This is the default value. It defines the list items in decimal number.(1, 2, 3, 4 .).
  • a: It defines the list items in alphabetically ordered lowercase letters .(a, b, c, d …)
  • A: It defines the list items in alphabetically ordered uppercase letters.(A, B, C, D ..)
  • i: It defines the list items in lowercase roman number order.(i, ii, iii, iv, v, vi …)
  • I: It defines the list items in uppercase roman number order.(I, II, III, IV, V, VI ..)

Return Value: It returns a string value which represents the kind of marker used in the ordered list.
Example-1: HTML Program that illustrate how to set the type Property. 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>dom ol type Property</title>
    </head>
    <body>
        <h1 style ="color:green;">GeeksforGeeks</h1>
        <h2 style="color:green;">DOM ol type Property</h2>
         
<p>List of all computer Subjects are</p>
  
        <ol id="GFG">
            <li>Data Structures</li>
            <li>Operating System</li>
            <li>Python programming</li>
            <li>DBMS</LI>
            <li>Computer Network</li>
        </ol>
        <button onclick="myGeeks()">Submit</button>
 
        <!-- Script to set the type of list -->
        <script>
          function myGeeks()  {
            var x = document.getElementById("GFG").type = "a";
          }
        </script>
    </body>
</html>                                

Output: 
Before clicking on the button : 
 



After clicking on the button : 
 

Example-2 : HTML Program that illustrate how to return the type Property. 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>Dom ol type Property</title>
    </head>
    <body>
        <h1 style ="color:green;">GeeksforGeeks</h1>
        <h2 style="color:green;">DOM ol type Property</h2>
         
<p>List of all computer Subjects are</p>
  
        <ol id="GFG" type="I">
            <li>Data Structures</li>
            <li>Operating System</li>
            <li>python programming</li>
            <li>DBMS</li>
            <li>Computer Network</li>
        </ol>
        <button onclick="myGeeks()">Submit</button>
        <p id="sudo" style="font-size:25px;color:green;"></p>
 
 
        <!-- Script to get the type of list -->
        <script>
          function myGeeks()  {
            var x = document.getElementById("GFG").type;
            document.getElementById("sudo").innerHTML =
                        "The type of Ordered list:" + x;
          }
        </script>
    </body>
</html>                                

Output: 
Before clicking on the button: 
 

After clicking on the button: 
 

Supported Browsers: The browser supported by DOM ol type Property are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :