In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > listStyleImage

listStyleImage style property

Browser support:

Specifies or returns a graphic image for a list label.

When the image is available, it will replace the marker set with the 'list-style-type' marker.

Syntax:

object.listStyleImage;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: list-style-image

Possible values:

The type of this property is string.

One of the following values:

url(URI)

Where URI specifies the location of an image file.

inherit

Takes the value of this property from the computed style of the parent element.

none

Default. No external list-marker is specified.

Default: none.

Example HTML code 1:

This example illustrates the use of the list-style-image property:

<head>
    <style>
        .example {
            list-style-image: url("listImage.png");
        }
    </style>
</head>
<body>
    <ol class="example">
        <li>Apple
        <li>Pear
        <li>Peach
    </ol>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the listStyleImage property in JavaScript:

<head>
    <style>
        .example {
            list-style-image: url("listImage.png");
        }
    </style>

    <script type="text/javascript">
        function SetImage () {
            var oList = document.getElementById ("myOList");
            oList.style.listStyleImage = 'url("listImage.png")';
        }

        function RemoveImage () {
            var oList = document.getElementById ("myOList");
            oList.style.listStyleImage = "none";
        }
    </script>
</head>
<body>
    <ol class="example" id="myOList">
        <li>Apple
        <li>Pear
        <li>Peach
    </ol>

    <button onclick="RemoveImage ();">Remove image!</button>
    <button onclick="SetImage ();">Set image!</button>
</body>