mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-14 19:50:12 +01:00
92 lines
2.5 KiB
HTML
92 lines
2.5 KiB
HTML
|
<HTML>
|
||
|
|
<BODY>
|
||
|
|
<h1>Attribute tests for OL and LI elements</h1>
|
||
|
|
<ol ID="myol">
|
||
|
|
<li id="1st">One</li>
|
||
|
|
<li id="2nd">Two
|
||
|
|
<ol>
|
||
|
|
<li>Apples</li>
|
||
|
|
<li>Oranges</li>
|
||
|
|
<li>Bananas</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li id="3rd">Three</li>
|
||
|
|
</ol>
|
||
|
|
<P>
|
||
|
|
Use the buttons below to change the attributes of the OL and LI elements.
|
||
|
|
</P>
|
||
|
|
|
||
|
|
<FORM>
|
||
|
|
<P>
|
||
|
|
Set OL element's <I>type</I> to
|
||
|
|
<SELECT SIZE="1" NAME="type">
|
||
|
|
<OPTION SELECTED VALUE="1">numerical</OPTION>
|
||
|
|
<OPTION VALUE="a">lower arabic</OPTION>
|
||
|
|
<OPTION VALUE="A">upper ararbic</OPTION>
|
||
|
|
<OPTION VALUE="i">lower roman</OPTION>
|
||
|
|
<OPTION VALUE="I">upper roman</OPTION>
|
||
|
|
</SELECT>
|
||
|
|
<INPUT TYPE="button" VALUE="Change Type" onClick="changeType(); return true;">
|
||
|
|
</P>
|
||
|
|
<P>
|
||
|
|
Set OL element's <I>start</I> to
|
||
|
|
<INPUT TYPE="text" MAXLENGTH="2" SIZE="2" NAME="start">
|
||
|
|
<INPUT TYPE="button" VALUE="Change Type" onClick="changeStart(); return true;">
|
||
|
|
</P>
|
||
|
|
<P>
|
||
|
|
Set the
|
||
|
|
<SELECT SIZE="1" NAME="nth">
|
||
|
|
<OPTION SELECTED VALUE="1st">1st</OPTION>
|
||
|
|
<OPTION VALUE="2nd">2nd</OPTION>
|
||
|
|
<OPTION VALUE="3rd">3rd</OPTION>
|
||
|
|
</SELECT>
|
||
|
|
LI element's <I>type</I> attribute to
|
||
|
|
<SELECT SIZE="1" NAME="type2">
|
||
|
|
<OPTION SELECTED VALUE="1">numerical</OPTION>
|
||
|
|
<OPTION VALUE="a">lower arabic</OPTION>
|
||
|
|
<OPTION VALUE="A">upper ararbic</OPTION>
|
||
|
|
<OPTION VALUE="i">lower roman</OPTION>
|
||
|
|
<OPTION VALUE="I">upper roman</OPTION>
|
||
|
|
</SELECT>
|
||
|
|
<INPUT TYPE="button" VALUE="Change Type" onClick="changeElementType(); return true;">
|
||
|
|
</P>
|
||
|
|
<P>
|
||
|
|
Set the
|
||
|
|
<SELECT SIZE="1" NAME="nth2">
|
||
|
|
<OPTION SELECTED VALUE="1st">1st</OPTION>
|
||
|
|
<OPTION VALUE="2nd">2nd</OPTION>
|
||
|
|
<OPTION VALUE="3rd">3rd</OPTION>
|
||
|
|
</SELECT>
|
||
|
|
LI element's <I>value</I> attribute to
|
||
|
|
<INPUT TYPE="text" MAXLENGTH="2" SIZE="2" NAME="start2">
|
||
|
|
<INPUT TYPE="button" VALUE="Change Type" onClick="changeElementStart(); return true;">
|
||
|
|
</P>
|
||
|
|
</P>
|
||
|
|
</FORM>
|
||
|
|
<SCRIPT>
|
||
|
|
var ol = document.getElementById("myol");
|
||
|
|
var types = new Array("1", "a", "A", "i", "I");
|
||
|
|
function changeType() {
|
||
|
|
ol.type = types[document.forms[0].type.selectedIndex];
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeStart() {
|
||
|
|
ol.start = Number(document.forms[0].start.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
// We should be able to do this with the select elements value, but
|
||
|
|
// since that doesn't work we need to maintain this array.
|
||
|
|
var nth = new Array("1st", "2nd", "3rd");
|
||
|
|
function changeElementType() {
|
||
|
|
var li = document.getElementById(nth[document.forms[0].nth.selectedIndex]);
|
||
|
|
li.type = types[document.forms[0].type2.selectedIndex];
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeElementStart() {
|
||
|
|
var li = document.getElementById(nth[document.forms[0].nth2.selectedIndex]);
|
||
|
|
li.value = Number(document.forms[0].start2.value);
|
||
|
|
}
|
||
|
|
</SCRIPT>
|
||
|
|
|
||
|
|
</BODY>
|
||
|
|
</HTML>
|