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
Last Updated :
05 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...