Open In App
Related Articles

HTML | DOM Style listStyle Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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


Last Updated : 05 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads