Latest web development tutorials
 

Style listStyle Property

< Style Object

Example

Change the style of a list:

document.getElementById("myList").style.listStyle = "decimal inside";
Try it Yourself »

Definition and Usage

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

With this property, you can set/return one or more of the following (in any order):

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

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The listStyle property is supported in all major browsers.


Syntax

Return the listStyle property:

object.style.listStyle

Set the listStyle property:

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

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. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: disc outside none
Return Value: A String, representing the style of a list
CSS Version CSS1

More Examples

Example

Change the type and position of a list to "square inside":

document.getElementById("myList").style.listStyle = "square inside";
Try it Yourself »

Example

Return the list style:

document.getElementById("myList").style.listStyle;
Try it Yourself »

Related Pages

CSS tutorial: CSS List

CSS reference: list-style property


< Style Object