HTML | DOM Style listStylePosition Property
Last Updated :
08 Aug, 2022
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:
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 >
< 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 1
- Edge 12
- Mozilla Firefox 1
- Internet Explorer 4
- Opera 3.5
- Safari 1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...