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.


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): 

Description of values:

Takes the value of this property from the computed style of the parent element.
Specifies or returns a graphic image for a list label.
Specifies or returns whether the list marker for a list item should appear inside or outside the list-item box.
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:
        .example {
            list-style: inside square;
    <ol class="example">
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the listStyle property in JavaScript:
    <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");
   = listValue + url;
    <ol id="myOlist">

    <br />
    <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 onchange="ChangeListStyle ('none');" size="2">
        <option />inside
        <option selected="selected" />outside
    <br /><br />
    <button onclick="ChangeListStyle ('url(listImage.png)');">Set a list image</button>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content