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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > type (dir, li, menu, ol, ul)

type property (dir, li, menu, ol, ul)

Browser support:

Specifies or returns the numbering style of a list.

This property is deprecated. Use the listStyleType style property instead.

Syntax:

object.type;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: type

Possible values:

String that sets or retrieves the type of the numbering style.

One of the following values:

Indicates numbers. Default for ol elements. This value is not supported for ul elements in Safari and Google Chrome.

Indicates lowercase letters. This value is not supported for ul elements in Safari and Google Chrome.

Indicates uppercase letters. This value is not supported for ul elements in Safari and Google Chrome.

Indicates lowercase Roman numerals. This value is not supported for ul elements in Safari and Google Chrome.

Indicates uppercase Roman numerals. This value is not supported for ul elements in Safari and Google Chrome.

circle

Indicates a hollow circle. This value is not supported for ol elements in Safari and Google Chrome.

disc

Indicates a solid disc. Default for ul elements. This value is not supported for ol elements in Safari and Google Chrome.

square

Indicates a solid square. This value is not supported for ol elements in Safari and Google Chrome.

Default: 1.

Example HTML code 1:

This example illustrates the use of the type attribute:

<ul type="square">
    <li>Apple</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation:

<ul style="list-style-type:square">
    <li>Apple</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the type property:

<head>
    <script type="text/javascript">
        function ChangeType (elem) {
            var list = document.getElementById ("myList");
            
            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var listType = elem.options[whichSelected].text;

            list.type = listType;
        }
    </script>
</head>
<body>
    <ol id="myList" type="square">
        <li>Apple</li>
        <li>Pear</li>
        <li>Peach</li>
    </ol>

    <select onchange="ChangeType (this);" size="8">
        <option />1
        <option />a
        <option />A
        <option />i
        <option />I
        <option />circle
        <option />disc
        <option selected="selected" />square
    </select>
</body>