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
Selected Reading
How to set the position of the list-item marker with JavaScript?
To set the position of the marker of the list-item, use the listStylePosition property in JavaScript. This property determines whether the list marker appears inside or outside the list item's content flow.
Syntax
element.style.listStylePosition = "inside" | "outside" | "inherit";
Parameters
| Value | Description |
|---|---|
inside |
Marker is positioned inside the list item's content box |
outside |
Marker is positioned outside the list item's content box (default) |
inherit |
Inherits the value from parent element |
Example: Interactive List Position
<!DOCTYPE html>
<html>
<body>
<ol id="myID">
<li>First item with some longer text to demonstrate the difference</li>
<li>Second item with additional content</li>
<li>Third item showing marker positioning</li>
</ol>
<button type="button" onclick="displayInside()">Set Inside Position</button>
<button type="button" onclick="displayOutside()">Set Outside Position</button>
<script>
function displayInside() {
document.getElementById("myID").style.listStylePosition = "inside";
}
function displayOutside() {
document.getElementById("myID").style.listStylePosition = "outside";
}
</script>
</body>
</html>
Understanding the Difference
When listStylePosition is set to "inside", the marker becomes part of the list item's content and flows with the text. With "outside", the marker sits in the margin area, creating a more traditional list appearance.
Practical Example: Programmatic Control
<!DOCTYPE html>
<html>
<head>
<style>
#demo-list { border: 1px solid #ccc; padding: 20px; }
</style>
</head>
<body>
<ul id="demo-list">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<button onclick="togglePosition()">Toggle Position</button>
<script>
let isInside = false;
function togglePosition() {
const list = document.getElementById("demo-list");
isInside = !isInside;
list.style.listStylePosition = isInside ? "inside" : "outside";
console.log("Position set to:", isInside ? "inside" : "outside");
}
</script>
</body>
</html>
Conclusion
The listStylePosition property controls whether list markers appear inside or outside the content flow. Use "inside" for integrated markers or "outside" for traditional list styling.
Updated on: 2026-03-15T23:18:59+05:30
252 Views
Advertisements