HTML - DOM Style Object listStyleType Property

Quiz

HTML DOM Style Object listStyleType property is used to set or get the marker type of list items.

Syntax

Set the listStyleType property

object.style.listStyleType= value;

Get the listStyleType property

object.style.listStyleType;

Property Values

Value	Description
armenian	It represents marker in traditional armenian numbering.
decimal	It is the default value for ol which represents marker in decimal format.
decimal-leading-zero	It represents marker in decimal format with leading zeros.
disc	It is the default value for ul which represents marker as a filled circle.
circle	It represents marker as a circle.
lower-alpha	It represents marker in lower-alpha.
upper-alpha	It represents marker in upper-alpha.
lower-latin	It represents marker in lower-latin.
upper-latin	It represents marker in upper-latin.
lower-roman	It represents marker in lower-roman.
upper-roman	It represents marker in upper-roman.
none	It represents no marker is displayed.
square	It represents marker as a square.
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 list type.

Examples of HTML DOM Style Object 'listStyleType' Property

The following examples illustrates different listStyleType property values.

Set Marker Type for List

In this example we have set different marker type for an Unordered list.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object listStyleType Property
    </title>
</head>
<body>
    <p>
        Click to set different list style type.
    </p>
    <button onclick="fun()">Decimal</button>  
    <button onclick="funTwo()">Disc</button>
    <button onclick="funThree()">Square</button>
    <button onclick="funFour()">Circle</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.listStyleType = "decimal";
        }  
        function funTwo() {
            document.getElementById("list")
                .style.listStyleType = "disc";
        }
        function funThree() {
            document.getElementById("list")
                .style.listStyleType = "square";
        }
        function funFour() {
            document.getElementById("list")
                .style.listStyleType = "circle";
        }     
    </script>
</body>
</html>

Set Marker Type for Ordered List

In this example we have set different marker type for an Ordered list.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object listStyleType Property
    </title>
</head>
<body>
    <p>
        Click to set different list style type.
    </p>
    <button onclick="fun()">Lower Alpha</button>  
    <button onclick="funTwo()">Upper Alpha</button>
    <button onclick="funThree()">Lower Roman</button>
    <button onclick="funFour()">Lower Latin</button>
    <br>
    <br>
    <ol id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>ReactJS</li>
        <li>C++</li>
    </ol>
    <script>
        function fun() {
            document.getElementById("list")
                .style.listStyleType = "lower-alpha";
        }  
        function funTwo() {
            document.getElementById("list")
                .style.listStyleType = "upper-alpha";
        }
        function funThree() {
            document.getElementById("list")
                .style.listStyleType = "lower-roman";
        }
        function funFour() {
            document.getElementById("list")
                .style.listStyleType = "lower-latin";
        }     
    </script>
</body>
</html>

Supported Browsers

Property
listStyleType	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page