Home Library Learn Downloads Support Community
Sign in | United States - English | |
0 out of 2 rated this helpful - Rate this topic

list-style Attribute | listStyle Property

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

Syntax

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

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.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are supported in IE7 Standards mode and IE5 (Quirks) mode only. For more information, see About Dynamic Properties and Defining Document Compatibility.

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.

Copy 

<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>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/list-style.htm

This example uses inline scripting to change the style of the list. If the default image cannot be located, a hollow circle is used.

Copy 

<UL onmouseover="this.style.listStyle='url(dot.gif) circle'">

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyle.htm

The following example sets the display property to list-item, a new possible value as of Microsoft Internet Explorer 6, to demonstrate that the listStyle property can also apply to elements on which the display property is set.

Copy 


<SPAN onmouseover="this.style.display='list-item'">A line of text...</SPAN>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/listStyle_2.htm

Standards Information

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

Applies To

CSSStyleDeclaration, currentStyle, LI, OL, runtimeStyle, style, UL, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor
Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ