Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style listStyleImage Property

  • Last Updated : 01 Aug, 2019

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

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :