HTML | DOM Style listStyleImage Property
The listStyleImage property is used to set or return an image as the list-item icon.
Syntax:
- Return the listStyleImage property:
object.style.listStyleImage
- Set the listStyleImage property:
object.style.listStyleImage = "none| url| initial| inherit"
Properties:
- none: Using this property, no image will be displayed.
- url: It is used to specify the path of the image.
- initial: It is used to set the property to its default value.
- inherit: It is used to inherit the property values from the parent element.
Return Value: It returns a string, representing the location path of the image.
Example-1: Showing none property
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style listStyleImage Property </ title > </ head > < body > < h1 > < center > Beginner < button onclick="image()">Press </ button > </ center > </ h1 > < h4 >Clicking on the 'Press' button will showcase the ListStyleImage Property.</ h4 > < ul id="gfg"> < li >G</ li > < li >E</ li > < li >E</ li > < li >K</ li > < li >S</ li > </ ul > < script > function image() { // Set list style "none". document.getElementById( "gfg").style.listStyleImage = "none"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example-2: Showing url property
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style listStyleImage Property </ title > </ head > < body > < h1 > < center > Beginner < button onclick="image()">Press </ button > </ center > </ h1 > < h4 >Clicking on the 'Press' button will showcase the ListStyleImage Property.</ h4 > < ul id="gfg"> < li >G</ li > < li >E</ li > < li >E</ li > < li >K</ li > < li >S</ li > </ ul > < script > function image() { // Set list style image using URL. document.getElementById( "gfg").style.listStyleImage = "url('https://media.w3wiki.net/wp-content/uploads/rlist.png')"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example-3: Showing initial property
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style listStyleImage Property </ title > </ head > < body > < h1 > < center > Beginner < button onclick="image()">Press </ button > </ center > </ h1 > < h4 >Clicking on the 'Press' button will showcase the ListStyleImage Property.</ h4 > < ul id="gfg"> < li >G</ li > < li >E</ li > < li >E</ li > < li >K</ li > < li >S</ li > </ ul > < script > function image() { // Set list style initial. document.getElementById( "gfg").style.listStyleImage = "initial"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example-4: Showing inherit property
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style listStyleImage Property </ title > </ head > < body > < h1 > < center > Beginner < button onclick="image()">Press </ button > </ center > </ h1 > < h4 >Clicking on the 'Press' button will showcase the ListStyleImage Property.</ h4 > < ul id="gfg"> < li >G</ li > < li >E</ li > < li >E</ li > < li >K</ li > < li >S</ li > </ ul > < script > function image() { // Set list style inherit. document.getElementById( "gfg").style.listStyleImage = "inherit"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Browser Support: The browser support by DOM style listStyleImage property are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 7
- Safari 1