list-style Attribute | listStyle Property

Sets or retrieves up to three separate listStyle properties of the object.

Syntax

HTML { list-style : sStyle }
Scripting object.style.listStyle [ = sStyle ]

Possible Values

sStyle String that specifies or receives up to three of the following values, in any order:
type Any of the range of type values available to the listStyleType property.
position Any of the range of position values available to the listStylePosition property.
image Any of the range of image values available to the listStyleImage property.
The property is read/write. The property has a default value of disc outside none. The Cascading Style Sheets (CSS) attribute is inherited.
Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see About Dynamic Properties.

Remarks

The listStyle property is a composite property. When specifying both the type and image values, the image value takes precedence, unless the image value is set to none or the image pointed to by the URL cannot display.
The listStyle property also applies to all elements on which the display property is set to list-item. To make the bullet points appear, you must explicitly set the margin property or set the listStylePosition property to inside on these elements.

Examples

The following examples use the list-style attribute and the listStyle property to set the list style.
This example uses ul and UL.compact as selectors in an embedded (global) style sheet to define the styles of two different unordered lists. For UL.compact to override the image that is set with the ul selector, you must explicitly set the image attribute to none.
<STYLE>
UL { list-style: outside url(dot.gif) }
UL.compact { list-style-image:none; list-style: inside circle }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>...
<LI>...
</UL>
<UL CLASS=compact>
<LI>...
<LI>...
</UL>
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
This example uses inline scripting to change the style of the list. If the default image cannot be located, a hollow circle is used.
<UL onmouseover="this.style.listStyle='url(dot.gif) circle'">
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
The following example sets the display property to list-item, a new possible value as of Internet Explorer 6, to demonstrate that the listStyle property can also apply to elements on which the display property is set.
<SPAN onmouseover="this.style.display='list-item'">A line of text...</SPAN>
This feature requires Microsoft® Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) .

Applies To

LI, OL, runtimeStyle, style, UL