Skip to content
Related Articles

Related Articles

HTML | DOM Style listStyle Property
  • Last Updated : 01 Aug, 2019
    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:






<!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:




<!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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :