HTML DOM listStyleType Property
Complete Style Object Reference
Definition and Usage
The listStyleType property sets the type of the list-item marker.
Syntax
Object.style.listStyleType=value
|
Possible Values
Value |
Description |
none |
No marker |
disc |
The marker is a filled circle |
circle |
The marker is a circle |
square |
The marker is a square |
decimal |
The marker is a number |
decimal-leading-zero |
The marker is a number with leading zeros (01, 02,
03, etc.) |
lower-roman |
The marker is lower-roman (i, ii, iii, iv, v, etc.) |
upper-roman |
The marker is upper-roman (I, II, III, IV, V, etc.) |
lower-alpha |
The marker is lower-alpha (a, b, c, d, e, etc.) |
upper-alpha |
The marker is upper-alpha (A, B, C, D, E, etc.) |
lower-greek |
The marker is lower-greek (alpha, beta, gamma, etc.) |
lower-latin |
The marker is lower-latin (a, b, c, d, e, etc.) |
upper-latin |
The marker is upper-latin (A, B, C, D, E, etc.) |
hebrew |
The marker is traditional Hebrew numbering |
armenian |
The marker is traditional Armenian numbering |
georgian |
The marker is traditional Georgian numbering (an, ban,
gan, etc.) |
cjk-ideographic |
The marker is plain ideographic numbers |
hiragana |
The marker is: a, i, u, e, o, ka, ki, etc. |
katakana |
The marker is: A, I, U, E, O, KA, KI, etc. |
hiragana-iroha |
The marker is: i, ro, ha, ni, ho, he, to, etc. |
katakana-iroha |
The marker is: I, RO, HA, NI, HO, HE, TO, etc. |
Note: Not all values above works in all browsers.
Example
The following example changes the list-item marker type:
<html>
<head>
<script type="text/javascript">
function changeList()
{
document.getElementById("ul1").style.listStyleType="square";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list-item marker type" />
</body>
</html>
|
Try-It-Yourself Demos
listStyleType - Change the list-item marker type
Complete Style Object Reference
|
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).
|
|