The HTML DOM Style listStyle property is used for setting or returning the three properties named list-style-type, list-style-position and list-style-image.
Following is the syntax for −
Setting the listStyle property −
object.style.listStyle = "type position image|initial|inherit"
The above properties are explained as follows −
Parameter | Description |
---|---|
type | Fordefining the list-item marker type. |
position | Forsetting the list-item marker positions |
image | Forspecifying the image set as list-item marker. |
initial | Forsetting this property to initial value. |
inherit | Toinherit the parent property value |
Let us look at an example for the listStyle property −
Example
<!DOCTYPE html> <html> <head> <script> function changeListStyle() { document.getElementById("LIST1").style.listStyle = "upper-roman"; document.getElementById("Sample").innerHTML="The list style has been changed to upper Roman"; } </script> </head> <body> <ul id="LIST1"> <li>MANGO</li> <li>GUAVA</li> <li>LITCHI</li> <li>WATERMELON</li> </ul> <p>Click the below button to change the list style for the above div</p> <button type="button" onclick="changeListStyle()">Change list style</button> <p id="Sample"></p> </body> </html>
Output
On clicking the “Change List Style” button −