HTML - DOM Style Object listStyleImage Property

Quiz

HTML DOM Style Object listStyleImage property used to set an image as list item marker.

Syntax

Set the listStyleImage property:

object.style.listStyleImage= "none | url | initial | inherit";

Get the listStyleImage property:

object.style.listStyleImage;

Property Values

Value	Description
none	It is the default value which does not display any image.
url	It specifies the path of the image.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return value

It returns a string value which represents the location path of image.

Example of HTML DOM Style Object 'listStyleImage' Property

The following example sets an image as the list items marker.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object listStyleImage Property
    </title>
</head>
<body>
    <p>
        Click to set image for list marker.
    </p>
    <button onclick="fun()">Set Image</button>
    <br>
    <br>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>ReactJS</li>
        <li>C++</li>
    </ul>
    <script>
        function fun() {
            document.getElementById("list")
                .style.listStyleImage = "url(image.png)";
        }
    </script>
</body>
</html>

Supported Browsers

Property
listStyleImage	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page