The listStyleImage property is used to set or return an image as the list-item icon.
Syntax:
- Return the listStyleImage property:
object.style.listStyleImage
- Set the listStyleImage property:
object.style.listStyleImage = "none| url| initial| inherit"
Properties:
- none: Using this property, no image will be displayed.
- url: It is used to specify the path of the image.
- initial: It is used to set the property to its default value.
- inherit: It is used to inherit the property values from the parent element.
Return Value: It returns a string, representing the location path of the image.
Example-1: Showing none property
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style listStyleImage Property
</title>
</head>
<body>
<h1>
<center>
Geeks <button onclick="image()">Press
</button>
</center>
</h1>
<h4>Clicking on the 'Press' button will showcase
the ListStyleImage Property.</h4>
<ul id="gfg">
<li>G</li>
<li>E</li>
<li>E</li>
<li>K</li>
<li>S</li>
</ul>
<script>
function image() {
// Set list style "none".
document.getElementById(
"gfg").style.listStyleImage =
"none";
}
</script>
</body>
</html>
Output:
- Before clicking on the button:
- After clicking on the button:
Example-2: Showing url property
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style listStyleImage Property
</title>
</head>
<body>
<h1>
<center>
Geeks <button onclick="image()">Press
</button>
</center>
</h1>
<h4>Clicking on the 'Press' button will
showcase the ListStyleImage Property.</h4>
<ul id="gfg">
<li>G</li>
<li>E</li>
<li>E</li>
<li>K</li>
<li>S</li>
</ul>
<script>
function image() {
// Set list style image using URL.
document.getElementById(
"gfg").style.listStyleImage =
"url('https://media.geeksforgeeks.org/wp-content/uploads/rlist.png')";
}
</script>
</body>
</html>
Output:
- Before clicking on the button:
- After clicking on the button:
Example-3: Showing initial property
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style listStyleImage Property
</title>
</head>
<body>
<h1>
<center>
Geeks <button onclick="image()">Press
</button>
</center>
</h1>
<h4>Clicking on the 'Press' button
will showcase the ListStyleImage Property.</h4>
<ul id="gfg">
<li>G</li>
<li>E</li>
<li>E</li>
<li>K</li>
<li>S</li>
</ul>
<script>
function image() {
// Set list style initial.
document.getElementById(
"gfg").style.listStyleImage =
"initial";
}
</script>
</body>
</html>
Output:
- Before clicking on the button:
- After clicking on the button:
Example-4: Showing inherit property
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style listStyleImage Property
</title>
</head>
<body>
<h1>
<center>
Geeks <button onclick="image()">Press
</button>
</center>
</h1>
<h4>Clicking on the 'Press' button will
showcase the ListStyleImage Property.</h4>
<ul id="gfg">
<li>G</li>
<li>E</li>
<li>E</li>
<li>K</li>
<li>S</li>
</ul>
<script>
function image() {
// Set list style inherit.
document.getElementById(
"gfg").style.listStyleImage =
"inherit";
}
</script>
</body>
</html>
Output:
- Before clicking on the button:
- After clicking on the button:
Browser Support: The browser support by DOM style listStyleImage property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 7
- Safari 1
