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