gecko/layout/html/tests/attributes/ul_li.html

78 lines
1.8 KiB
HTML

<HTML>
<BODY>
<h1>Attribute tests for UL and LI elements</h1>
<ul ID="myul">
<li id="1st">One</li>
<li id="2nd">Two
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</li>
<li id="3rd">Three</li>
</ul>
<P>
Use the buttons below to change the attributes of the UL and LI elements.
</P>
<FORM>
<P>
Set UL element's <I>type</I> to
<SELECT SIZE="1" NAME="type">
<OPTION SELECTED VALUE="disc">disc</OPTION>
<OPTION VALUE="circle">circle</OPTION>
<OPTION VALUE="square">square</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Type" onClick="changeType(); 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="disc">disc</OPTION>
<OPTION VALUE="circle">circle</OPTION>
<OPTION VALUE="square">square</OPTION>
</SELECT>
<INPUT TYPE="button" VALUE="Change Type" onClick="changeElementType(); return true;">
</P>
</FORM>
<SCRIPT>
var ul = document.getElementById("myul");
function changeType() {
if (document.forms[0].type.selectedIndex == 0) {
ul.type = "disc";
}
else if (document.forms[0].type.selectedIndex == 1) {
ul.type = "circle";
}
else {
ul.type = "square";
}
}
// 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]);
if (document.forms[0].type2.selectedIndex == 0) {
li.type = "disc";
}
else if (document.forms[0].type2.selectedIndex == 1) {
li.type = "circle";
}
else {
li.type = "square";
}
}
</SCRIPT>
</BODY>
</HTML>