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

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

listStyleType style property

Browser support:

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

Syntax:

object.listStyleType;

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-type

Possible values:

The type of this property is string.

One of the following values:

-moz-arabic-indic

Arabic indic digits.

-moz-bengali

Bengali digits.

-moz-cjk-earthly-branch

Cjk earthly digits.

-moz-cjk-heavenly-stem

Cjk heavenly digits.

-moz-devanagari

Devanagari digits.

-moz-ethiopic-halehame

Ethiopic digits.

-moz-ethiopic-halehame-am

Ethiopic digits.

-moz-ethiopic-halehame-ti-er

Ethiopic digits.

-moz-ethiopic-halehame-ti-et

Ethiopic digits.

-moz-ethiopic-numeric

Ethiopic digits.

-moz-gujarati

Gujarati digits.

-moz-gurmukhi

Gurmukhi digits.

-moz-hangul

Hangul digits.

-moz-hangul-consonant

Hangul consonant digits.

-moz-japanese-formal

Japanese formal digits.

-moz-japanese-informal

Japanese informal digits.

-moz-kannada

Kannada digits.

-moz-khmer

Khmer digits.

-moz-lao

Lao digits.

-moz-malayalam

Malayalam digits.

-moz-myanmar

Myanmar digits.

-moz-oriya

Oriya digits.

-moz-persian

Persian digits.

-moz-simp-chinese-formal

Simple chinese formal digits.

-moz-simp-chinese-informal

Simple chinese informal digits.

-moz-tamil

Tamil digits.

-moz-telugu

Telugu digits.

-moz-thai

Thai digits.

-moz-trad-chinese-formal

Chinese formal digits.

-moz-trad-chinese-informal

Chinese informal digits.

-moz-urdu

Urdu digits.

armenian

Armenian digits.

circle

Outlined circles.

cjk-ideographic

Cjk ideographic digits.

decimal

1, 2, 3, 4, and so on. Default for ol elements.

decimal-leading-zero

0, 1, 2, 3, and so on.

disc

Solid circles. Default for ul elements.

georgian

Georgian digits.

hebrew

Hebrew digits.

hiragana

Hiragana digits.

hiragana-iroha

Hiragana iroha digits.

inherit

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

katakana

Katakana digits.

katakana-iroha

Katakana iroha digits.

lower-alpha

a, b, c, d, and so on.

lower-greek

Lower-greek digits.

lower-latin

Lower latin digits.

lower-roman

i, ii, iii, iv, and so on.

none

No marker is shown.

square

upper-alpha

A, B, C, D, and so on.

upper-latin

Upper latin digits.

upper-roman

I, II, III, IV, and so on.

Default: disc.

Example HTML code 1:

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

<body>
    <ol style="list-style-type: square;">
        <li>square
        <li>list
        <li>type
    </ol>

    <ol style="list-style-type: circle;">
        <li>circle
        <li>list
        <li>type
    </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 listStyleType property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeListStyle (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var listValue = selectTag.options[whichSelected].text;

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

    <br />
    <select onchange="ChangeListStyle (this);" 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>
</body>