Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Ol type Property
The HTML DOM Ol type property sets or returns the value of the type attribute of an ordered list (<ol>) element. This property determines the type of marker (numbering style) used for list items in an ordered list.
Syntax
Following is the syntax for returning the type property −
olObject.type
Following is the syntax for setting the type property −
olObject.type = "1|a|A|i|I"
Property Values
The type property accepts the following values −
| Value | Description | Example |
|---|---|---|
| "1" | Default decimal numbers | 1, 2, 3, 4... |
| "a" | Lowercase letters | a, b, c, d... |
| "A" | Uppercase letters | A, B, C, D... |
| "i" | Lowercase Roman numerals | i, ii, iii, iv... |
| "I" | Uppercase Roman numerals | I, II, III, IV... |
Return Value
The property returns a string representing the current type of marker used in the ordered list.
Example − Getting and Setting the Type Property
Following example demonstrates how to get and set the type property of an ordered list −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<ol id="languageList" type="1">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
<button onclick="showCurrentType()">Show Current Type</button>
<button onclick="changeToRoman()">Change to Roman</button>
<button onclick="changeToLetters()">Change to Letters</button>
<button onclick="resetToNumbers()">Reset to Numbers</button>
<p id="output"></p>
<script>
var list = document.getElementById("languageList");
var output = document.getElementById("output");
function showCurrentType() {
output.textContent = "Current type: " + list.type;
}
function changeToRoman() {
list.type = "I";
output.textContent = "Changed to uppercase Roman numerals";
}
function changeToLetters() {
list.type = "A";
output.textContent = "Changed to uppercase letters";
}
function resetToNumbers() {
list.type = "1";
output.textContent = "Reset to decimal numbers";
}
</script>
</body>
</html>
The output shows an ordered list with buttons to change the marker type dynamically −
Programming Languages 1. JavaScript 2. Python 3. Java 4. C++ [Show Current Type] [Change to Roman] [Change to Letters] [Reset to Numbers] (Clicking buttons changes the list markers and displays status messages)
Example − Dynamic List Type Changer
Following example shows a more comprehensive demonstration with multiple list types −
<!DOCTYPE html>
<html>
<head>
<title>Ol Type Property - Advanced Example</title>
<style>
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
ol {
text-align: left;
display: inline-block;
margin: 20px;
}
button {
margin: 5px;
padding: 8px 15px;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="container">
<h2>HTML DOM Ol Type Property Demo</h2>
<h3>Students List</h3>
<ol id="studentList" type="1">
<li>Alice</li>
<li>Bob</li>
<li>Charlie</li>
<li>Diana</li>
<li>Edward</li>
</ol>
<div>
<button onclick="setType('1')">Numbers (1, 2, 3)</button>
<button onclick="setType('a')">Lowercase (a, b, c)</button>
<button onclick="setType('A')">Uppercase (A, B, C)</button>
<button onclick="setType('i')">Roman Lower (i, ii, iii)</button>
<button onclick="setType('I')">Roman Upper (I, II, III)</button>
</div>
<p id="status" style="margin-top: 15px; font-weight: bold;"></p>
</div>
<script>
var studentList = document.getElementById("studentList");
var status = document.getElementById("status");
function setType(typeValue) {
studentList.type = typeValue;
var typeNames = {
'1': 'Decimal Numbers',
'a': 'Lowercase Letters',
'A': 'Uppercase Letters',
'i': 'Lowercase Roman Numerals',
'I': 'Uppercase Roman Numerals'
};
status.textContent = "List type changed to: " + typeNames[typeValue];
}
</script>
</body>
</html>
This example provides buttons for each marker type, allowing users to see the immediate effect of changing the type property −
Students List 1. Alice 2. Bob 3. Charlie 4. Diana 5. Edward [Numbers] [Lowercase] [Uppercase] [Roman Lower] [Roman Upper] List type changed to: Decimal Numbers
Browser Compatibility
The Ol type property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. However, the visual representation of Roman numerals and letters may vary slightly between browsers.
Key Points
Following are the important points about the Ol type property −
-
The property both gets and sets the marker type for ordered lists.
-
Changes to the type property take effect immediately without page reload.
-
The default type is "1" (decimal numbers) if no type is specified.
-
Invalid type values are ignored and the list retains its current type.
-
The property affects all list items within the ordered list element.
Conclusion
The HTML DOM Ol type property provides a simple way to dynamically change the numbering style of ordered lists using JavaScript. It accepts five standard values ("1", "a", "A", "i", "I") and immediately updates the visual appearance of list markers. This property is useful for creating interactive content where list formatting needs to change based on user actions.
183 Views
