Javascript Reference - HTML DOM Style listStyle Property

The listStyle property sets or gets the shorthand form property for a list.

We can use this property to set the following three properties.

list-style-type
list-style-position
list-style-image

Browser Support


`listStyle`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the listStyle property:

var v = object.style.listStyle

Set the listStyle property:

object.style.listStyle='type position image|initial|inherit

Property Values

Parameter	Description
type	Set the list-item marker type
position	Position the list-item marker
image	Set an image for the list-item marker
initial	Set to default value.
inherit	Inherit from its parent element.

Technical Details

Default Value:	disc outside none
Return Value:	A string representing the list style
CSS Version	CSS1

Example

The following code shows how to change the list style.


<!DOCTYPE html>
<html>
<body>
<ul id="myList">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul><!-- w ww . j  av a 2 s .  c  o m-->
<button type="button" onclick="myFunction()">test</button> 
<script>
function myFunction() {
    document.getElementById("myList").style.listStyle = "decimal inside";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the list style.


<!DOCTYPE html>
<html>
<body>
<ul id="myList" style="list-style:decimal-leading-zero inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul><!--  w ww. j a  v  a2s .  c  o  m-->

<button type="button" onclick="myFunction()">test</button>
 
<script>
function myFunction() {
    console.log(document.getElementById("myList").style.listStyle);
}
</script>
</body>
</html>

The code above is rendered as follows: