Javascript DOM CSS Style listStyle Property

Introduction

Change the style of a list: 

document.getElementById("myList").style.listStyle = "decimal inside";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>CSS</li>
  <li>HTML</li>
  <li>SQL</li>
  <li>C++</li>
</ul>//from   www .  j  av  a2 s .  c  o m

<button type="button" onclick="myFunction()">Change list style</button>

<script>
function myFunction() {
  document.getElementById("myList").style.listStyle = "decimal inside";
}
</script>

</body>
</html>

The listStyle property sets or gets up to three separate list properties in a shorthand form.

With this property, you can set/get one or more of the following:

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

Property Values

Parameter Description
type Defines the list-item marker type
position Positions the list-item marker
image Defines an image to be used as the list-item marker
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The listStyle property Default Value:disc outside none

The listStyle property returns a String representing the style of a list.




PreviousNext

Related