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 reversed Property
The HTML DOM Ol reversed property sets or returns whether an ordered list should display its numbering in descending order (from highest to lowest) instead of the default ascending order (from lowest to highest).
Syntax
Following is the syntax for returning the reversed property −
olObject.reversed
Following is the syntax for setting the reversed property −
olObject.reversed = booleanValue
Parameters
The booleanValue parameter can be one of the following −
| Value | Description |
|---|---|
| true | Sets the list numbering in descending order (highest to lowest) |
| false | Sets the list numbering in ascending order (lowest to highest) - default behavior |
Return Value
Returns a boolean value indicating whether the ordered list is set to display in reverse order (true) or normal order (false).
Example
Following example demonstrates how to use the reversed property to change the numbering order of an ordered list −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol reversed Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.container { width: 70%; margin: 0 auto; text-align: center; }
ol { width: 30%; margin: 0 auto; text-align: left; }
button { padding: 10px 20px; margin: 10px; border-radius: 5px; border: 1px solid #ccc; }
#divDisplay { margin-top: 15px; font-weight: bold; color: green; }
</style>
</head>
<body>
<div class="container">
<h2>HTML DOM Ol reversed Property</h2>
<h3>Students List</h3>
<ol id="orderList">
<li>Zampa</li>
<li>Rajesh</li>
<li>Eden</li>
<li>Bina</li>
<li>Alex</li>
<li>Adam</li>
</ol>
<button onclick="reverseNumbering()">Reverse List</button>
<button onclick="normalNumbering()">Normal List</button>
<div id="divDisplay"></div>
</div>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementById("orderList");
function reverseNumbering() {
studentList.reversed = true;
divDisplay.textContent = 'List set to descending order (6, 5, 4, 3, 2, 1)';
}
function normalNumbering() {
studentList.reversed = false;
divDisplay.textContent = 'List set to ascending order (1, 2, 3, 4, 5, 6)';
}
</script>
</body>
</html>
The output shows how the numbering changes from ascending (1, 2, 3...) to descending (6, 5, 4...) order −
Students List 6. Zampa (when reversed = true) 5. Rajesh 4. Eden 3. Bina 2. Alex 1. Adam Students List 1. Zampa (when reversed = false) 2. Rajesh 3. Eden 4. Bina 5. Alex 6. Adam
Checking Current State
Following example shows how to check the current state of the reversed property −
<!DOCTYPE html>
<html>
<head>
<title>Check Reversed Property State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Programming Languages</h3>
<ol id="languages" reversed>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
<button onclick="checkState()">Check Reversed State</button>
<p id="status"></p>
<script>
function checkState() {
var list = document.getElementById("languages");
var isReversed = list.reversed;
var status = document.getElementById("status");
status.textContent = "List is " + (isReversed ? "reversed" : "normal") +
" (reversed property: " + isReversed + ")";
}
</script>
</body>
</html>
Since the ordered list has the reversed attribute in HTML, clicking the button displays −
List is reversed (reversed property: true)
Practical Use Case
The reversed property is commonly used for countdown lists, rankings from highest to lowest, or any scenario where descending numbering makes more logical sense −
<!DOCTYPE html>
<html>
<head>
<title>Top 5 Programming Languages (Ranked)</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Top 5 Programming Languages</h3>
<ol id="rankings">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>TypeScript</li>
<li>C#</li>
</ol>
<button onclick="showRanking()">Show as Ranking (5 to 1)</button>
<script>
function showRanking() {
document.getElementById("rankings").reversed = true;
}
</script>
</body>
</html>
After clicking the button, the list shows as a proper ranking from 5 down to 1, making JavaScript appear as #1.
Conclusion
The HTML DOM Ol reversed property provides a simple way to toggle between ascending and descending numbering in ordered lists. Setting it to true reverses the numbering order, while false restores the default ascending order. This property is particularly useful for rankings, countdowns, and prioritized lists.
207 Views
