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 an image as the list-item marker with JavaScript?
To set an image as the marker in list items, use the listStyleImage property in JavaScript. This property allows you to replace default list markers (bullets or numbers) with custom images.
Syntax
element.style.listStyleImage = "url('image-path')";
Example
The following example demonstrates how to set a custom image as the list-item marker:
<!DOCTYPE html>
<html>
<body>
<ol id="myList">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<button type="button" onclick="setImageMarker()">Set Image Marker</button>
<button type="button" onclick="resetMarker()">Reset to Default</button>
<script>
function setImageMarker() {
document.getElementById("myList").style.listStyleImage = "url('/css/images/bullet.gif')";
}
function resetMarker() {
document.getElementById("myList").style.listStyleImage = "none";
}
</script>
</body>
</html>
Different Image Formats
You can use various image formats for list markers:
<!DOCTYPE html>
<html>
<body>
<ul id="imageList">
<li>PNG Image Marker</li>
<li>SVG Image Marker</li>
<li>Custom Icon</li>
</ul>
<button onclick="setPngMarker()">PNG Marker</button>
<button onclick="setSvgMarker()">SVG Marker</button>
<script>
function setPngMarker() {
document.getElementById("imageList").style.listStyleImage = "url('/images/star.png')";
}
function setSvgMarker() {
document.getElementById("imageList").style.listStyleImage = "url('/images/arrow.svg')";
}
</script>
</body>
</html>
Key Points
- The image should be small (typically 16x16 to 24x24 pixels) to work well as a marker
- Use
listStyleImage: "none"to remove custom images and return to default markers - The property works with both ordered (
<ol>) and unordered (<ul>) lists - Always provide a fallback with
listStyleTypein case the image fails to load
Browser Compatibility
The listStyleImage property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge.
Conclusion
The listStyleImage property provides an easy way to customize list markers with images. Use appropriately sized images and always test across different browsers for consistent appearance.
Updated on: 2026-03-15T23:18:59+05:30
202 Views
Advertisements