Aquileo | HTML | DOM Style listStyle Property

The Style listStyle Property in HTML DOM used to set up to three list properties namely

list-style-type
list-style-position
list-style-image

Syntax:

It returns the listStyle property.

object.style.listStyle

It used to set the listStyle property.

object.style.listStyle = "type position image|initial|inherit"

Property Values:

type: This is used to mark the list items.
position: This is used to position the list item marker.
image: It is used to define the image for the list item marker.
initial: It sets the listStyle property to its default value.
inherit: This property is inherited from its parent element.

Return Value:

It returns string that represents a style of a list.

Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Style listStyle Property </title>
    <style>

    </style>

</head>

<body>

    <h1 style="color:green;width:40%;"> 
                GeeksForGeeks 
            </h1>
    <h2>DOM Style listStyle Property </h2>
  
    <ul id="gfg">
        <li>C</li>
        <li>C++</li>
        <li>Python</li>
        <li>Java</li>
    </ul>

    <button type="button" onclick="geeks()">
        Change ListStyle
    </button>

    <script>
        function geeks() {
          
            //  Set listStyle in square.
            document.getElementById(
              "gfg").style.listStyle = 
              "square inside";
        }
    </script>

</body>

</html>

Output:

Before Click on the button:

After Click on the button:

Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title>DOM Style listStyle Property </title>
    <style>

    </style>

</head>

<body>

    <h1 style="color:green;width:40%;"> 
                GeeksForGeeks 
            </h1>
    <h2>DOM Style listStyle Property </h2>
  
    <ul id="gfg">
        <li>C</li>
        <li>C++</li>
        <li>Python</li>
        <li>Java</li>
    </ul>

    <button type="button" onclick="geeks()">
        Change ListStyle
    </button>

    <script>
        function geeks() {
          
            // set listStyle in decimal.
            document.getElementById(
              "gfg").style.listStyle = 
              "decimal inside";
        }
    </script>

</body>

</html>

Output:

Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by DOM Style listStyle property are listed below:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 4 and above
Firefox 1 and above
Opera 7 and above
Apple Safari 1 and above

HTML | DOM Style listStyle Property

Explore