<html>
<head>
<title>Abakada CSS Demo: list-style-type Attribute</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
<!--
#theList {
font: bold 13pt arial; text-align: left;
margin-left: 10em }
-->
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada CSS Demo: list-style-type Attribute</h2></div>
<hr size=1 width=92%>
<center>
<h5>This example shows the effects of applying the different values possible for the CSS <b>list-style-type</b> style attribute.</h5>
<p id="msg">Select from the list style options below to see how the style is applied, and note the resulting CSS syntax for the style declaration. </p>
<ul id="theList">
<li>item one
<li>item two
<li>item three
<li>item four
</ul>
<h5 id="theSyntax">Syntax { list-style-type: }</h5>
<table cellpadding=5>
<tr>
<td>Select Option</td>
<td><select name="listType" tabindex=1 onchange="chgProp ( this.value )">
<option value="">
<option value="disc">disc
<option value="circle">circle
<option value="square">square
<option value="decimal">decimal
<option value="lower-roman">lower-roman
<option value="upper-roman">upper-roman
<option value="lower-alpha">lower-alpha
<option value="upper-alpha">upper-alpha
<option value="none">none
</select></td>
<td><button onclick="reset ( )">Reset</button></td></tr>
</table>
<p class="note">NOTE: <b>list-style-type</b> defaults to <b>disc</b> if no list-item marker is specified. </p>
</center>
<script language="JavaScript">
<!--
var el = document.all ? document.all [ 'theList' ] : document.getElementById ( 'theList' );
var synt = document.all ? document.all [ 'theSyntax' ] : document.getElementById ( 'theSyntax' );
function chgProp ( lst ) {
el.style.listStyleType = lst;
txt = "Syntax { list-style-type: " + lst + " }";
if ( document.all ) synt.innerText = txt;
else if ( dom ) synt.childNodes [ 0 ].nodeValue = txt;
}
function reset ( ) {
list = document.all ? document.all [ 'listType' ] : document.getElementById ( 'listType' )
list.value = "";
el.style.listStyleType = list.value;
txt = "Syntax { list-style-type: }"
if ( document.all ) synt.innerText = txt;
else if ( dom ) synt.childNodes [ 0 ].nodeValue = txt;
}
//-->
</script>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>