HTML | DOM Style listStyleImage Property

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

html

<!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

html

<!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

html

<!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

html

<!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>