mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-09-14 09:10:14 +02:00
78 lines
1.8 KiB
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> |