1 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
2 “http://www.w3.0rg/TR/html4/strict.dtd”>
3 <html lang=pt-BR>
4 <head>
5 <title>CSS x JS</title>
6 <script type=“text/javascript”>
7 function decorate( ){
8 var links = document.getElementsByTagName(“li”);
9
10 for (i=0; i<links.length; i++) {
11 links[ i ].firstChild.onmouseover = function( ) {this.style.backgroundColor = '#ff5454'}
12 links[ i ].firstChild.onmouseout = function( ) {this.style.backgroundColor = '#ffffff”}
13 }
14 }
15 </script>
16 </head>
17 <body onload=“decorate( )”>
18 <ol>
19 <li><a href=“#1” id=“link1l”>Link #1</a></li>
20 <li><a href=“#2” id=“link2”>Link #2</a></li>
21 <li><a href=“#3” id=“link3”>Link #3</a></li>
22 </ol>
23 </body>
24 </html>
As declarações CSS que proveem o mesmo efeito produzido pelo função “decorate” apresentada na ilustração são:
