HTML | DOM Style listStylePosition Property
The DOM Style listStylePosition property sets or returns the position of the list-item marker.
Syntax :
- For set the listStylePosition property:
object.style.listStylePosition = value
- For return the listStylePosition property:
object.style.listStylePosition
Return Value: This return a String that representing the position of the list-item marker.
Values:
Value | Description |
---|---|
outside | This is default and specifies that list-item marker will be rendered before any text content. |
inside | This indents the list-item marker. |
initial | This sets this property to its default value. |
inherit | This inherits this property from its parent element. |
Example-1: Use of “inside” value.
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style listStylePosition Property </ title > < style > li { background-color: lightgreen; } div { padding: 20px; width: 70%; heinght: 40%; border: 2px solid green; } </ style > </ head > < body > < div > < p >Welcome to GeekforGeeks.!</ p > < ul id = "mainUL" > < li >item_1</ li > < li >item_2</ li > < li >item_3</ li > </ ul > </ div > < br > < input type = "button" value = "click Me.!" onclick = "mainFunction()" /> < script > function mainFunction() { // set position 'inside' document.getElementById( "mainUL").style.listStylePosition = "inside"; } </ script > </ body > </ html > |
Output :
- Before click:
- After Click:
Example-2: Use of “outside” value. Since this is default value so we can check by simply return The list-style-position property.
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style listStylePosition Property </ title > < style > div { padding: 20px; width: 70%; height: 40%; border: 2px solid green; } </ style > </ head > < body > < div > < p >Welcome to GeekforGeeks.!</ p > <!-- set position 'outside' --> < ul id = "mainList" style = "list-style-position:outside;" > < li >item_1</ li > < li >item_2</ li > < li >item_3</ li > </ ul > < br > < input type = "button" value = "click Me.!" onclick = "mainFunction()" /> </ div > < script > function mainFunction() { // Return position using alert. alert(document.getElementById( "mainList").style.listStylePosition); } </ script > </ body > </ html > |
Output :


Supported Browsers: The browser supported by HTML | DOM Style listStylePosition Property are listed below:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari