Open In App

HTML | DOM Style listStyle Property

Improve
Improve
Like Article
Like
Save
Share
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