list-style attribute | listStyle Property

DHTML, HTML, & CSS

list-style attribute | listStyle Property


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

Syntax

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

Possible Values

sStyle String that specifies up to three of the following values, in any order:
typeAny of the range of type values available to the listStyleType property.
positionAny of the range of position values available to the listStylePosition property.
imageAny of the range of image values available to the listStyleImage property.

The property is read/write with a default value set by the browser; 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 dynamic propertiesInternet Link.

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.

When the left margin of a list item is set to 0 using one of the margin properties, the list item markers do not show. The margin should be set to a minimum of 30 points.

Example

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.

Note For the UL.compact to override the image that is set with the UL selector, you must explicitly set the list-style-image attribute to 'none'.

Sample Code

<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 Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

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 Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
Version data is listed when the mouse hovers over a link, or the link has focus.
LI, OL, runtimeStyle, style, UL

Back to topBack to top

Did you find this topic useful? Suggestions for other topics? write us!Internet Link

© 1999 microsoft corporation. all rights reserved. terms of useInternet Link.