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
Please Login to comment...