HTML - DOM Style Object listStyle Property

Quiz

HTML DOM Style Object listStyle property is a shorthand property which sets or returns following three properties:

list-style-type
list-style-position
list-style-image

Syntax

Set the listStyle property:

object.style.listStyle= "type position image | initial | inherit";

Get the listStyle property:

object.style.listStyle;

Property Values

Value	Description
type	It specifies the marker type of list items.
position	It positions the list item marker.
image	It specifies an image as list item marker.
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 style of a list.

Example of HTML DOM Style Object 'listStyle' Property

The following example illustrates listStyle property, here we have changed the list style type from disc to lower-roman.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object listStyle Property
    </title>
</head>
<body>
    <p>
        Click to set list style property.
    </p>
    <button onclick="fun()">
        Set List Style
    </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.listStyle = "lower-roman inside";
        }       
    </script>
</body>
</html>

Supported Browsers

Property
listStyle	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page