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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-2: Showing url property

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-3: Showing initial property

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example-4: Showing inherit property

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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
    • Internet Explorer
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.