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

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

listStyle style property

Browser support:

Specifies or returns up to three separate listStyle properties for an object.

With this property, you can set the type and position of the markers visible before every list element. Furthermore, you can set an image to display as a marker for the list. When the image is available, it will replace the marker set with the 'list-style-type' marker.

Syntax:

object.listStyle;

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

Possible values:

The type of this property is string.

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used only once):

•	<list-style-type>
•	<list-style-position>
•	<list-style-image>

•

inherit

Description of values:

inherit

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

list-style-image

Specifies or returns a graphic image for a list label.

list-style-position

Specifies or returns whether the list marker for a list item should appear inside or outside the list-item box.

list-style-type

Specifies or returns the style of the list marker bullet or numbering system within a list.

Default: disc outside none.

Example HTML code 1:

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

<head>
    <style>
        .example {
            list-style: inside square;
        }
    </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 listStyle property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeListStyle (url) {
            var selectTags = document.getElementsByTagName ("select");
            var listValue = "";
            
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                whichSelected = selectTags[i].selectedIndex;

                // Returns the selected options values
                listValue += selectTags[i].options[whichSelected].text + " ";
            }

            var oList = document.getElementById ("myOlist");
            oList.style.listStyle = listValue + url;
        }
    </script>
</head>
<body>
    <ol id="myOlist">
        <li>Apple
        <li>Pear
        <li>Peach
    </ol>

    <br />
    list-style-type:
    <select onchange="ChangeListStyle ('none');" size="9">
        <option />none
        <option />circle
        <option selected="selected" />disc
        <option />decimal
        <option />lower-roman
        <option />lower-alpha
        <option />square
        <option />upper-roman
        <option />upper-alpha
    </select>
    list-style-position:
    <select onchange="ChangeListStyle ('none');" size="2">
        <option />inside
        <option selected="selected" />outside
    </select>
    <br /><br />
    <button onclick="ChangeListStyle ('url(listImage.png)');">Set a list image</button>
</body>