|
1 <HTML> |
|
2 <HEAD> |
|
3 <STYLE> |
|
4 .first { display: inline; color: green; } |
|
5 .second { display: block; color: red; } |
|
6 </STYLE> |
|
7 <SCRIPT> |
|
8 var className = "first"; |
|
9 function toggleClass() { |
|
10 var node = document.getElementById("foo"); |
|
11 if (className == "first") { |
|
12 className = "second"; |
|
13 } |
|
14 else { |
|
15 className = "first"; |
|
16 } |
|
17 node.className = className; |
|
18 } |
|
19 </SCRIPT> |
|
20 </HEAD> |
|
21 <BODY> |
|
22 <H1>Changing CLASS test</H1> |
|
23 <P>Clicking on the button that follows this paragraph |
|
24 should change the layout of <SPAN ID="foo" CLASS="first">these words</SPAN> |
|
25 with respect to the rest of the flow.</P> |
|
26 <FORM> |
|
27 <INPUT TYPE="button" VALUE="Toggle class" onClick="toggleClass(); return true;"> |
|
28 </FORM> |
|
29 </BODY> |
|
30 </HTML> |