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.
html
<!DOCTYPE html><html><head> <title> HTML | DOM Style listStylePosition Property </title> <style> li { background-color: lightgreen; } div { padding: 20px; width: 70%; height: 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.
html
<!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:
- Before click:
- After click:
Supported Browsers: The browser supported by HTML | DOM Style listStylePosition Property are listed below:
- Google Chrome 1
- Edge 12
- Mozilla Firefox 1
- Internet Explorer 4
- Opera 3.5
- Safari 1
Please Login to comment...