HTML DOM Style listStyleImage Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Style listStyleImage property is used for setting or returning an image as a list item marker.

Following is the syntax for −

Setting the listStyleImage property −

object.style.listStyleImage = "none|url|initial|inherit"

The above properties are explained as follows −

Value
Description
none
Thisis the default value and displays no image.
url
Forspecifying the image path.
initial
Forsetting this property to initial value.
inherit
Toinherit the parent property value

Let us look at an example for the listStyleImage property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script>
   function changeListImage() {
      document.getElementById("LIST1").style.listStyleImage =          "url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/10px-   Red_circle.svg.png')";
   document.getElementById("Sample").innerHTML=" The list marker has been replaced by a red circle    image";
   }
</script>
</head>
<body>
   <ul id="LIST1">
      <li>LIST ITEM1</li>
      <li>LIST ITEM2</li>
      <li>LIST ITEM3</li>
      <li>LIST ITEM4</li>
   </ul>
   <p>Click the below button to set the list style image for the above list</p>
   <button type="button" onclick="changeListImage()">Change List Image</button>
   <p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change List Image” button −

raja
Published on 24-Oct-2019 11:04:40
Advertisements