Open In App

HTML | DOM Style listStyleImage Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


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


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads