4月13日--动态改变页面外观
1、新建blue.css文件，用于在js中调用
.tab{ width: 600px; background-color: #036; } .tab thead{ background-color: #009; color:#eee; } .treven{ background-color: #eee; color:#00e; font-weight: normal; } .trodd{ background-color: #ddd; color:#009; font-weight: normal; } .tractive{ background-color: blue; color:white; font-weight: bold; }
2、新建green.css文件，用于在js中调用
.tab{ width: 600px; background-color: #366; } .tab thead{ background-color: #3f0; color:#eee; } .treven{ background-color: #6f6; color:#00c; font-weight: normal; } .trodd{ background-color: #3f6; color:#009; font-weight: normal; } .tractive{ background-color: green; color:white; font-weight: bold; }
3、新建red.css文件，用于在js中调用
.tab{ width: 600px; background-color: #900; } .tab thead{ background-color: #c06; color:#eee; } .treven{ background-color: #c69; color:#ffc; font-weight: normal; } .trodd{ background-color: #c6f; color:#ff9; font-weight: normal; } .tractive{ background-color: red; color:white; font-weight: bold; }
//
//
//
js+html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态改变页面外观</title> <link rel="stylesheet" href="css/green.css" id="linkCSS"> <script type="text/javascript"> onload=function(){ var tb=document.getElementsByTagName("tbody")[0]; var tr=tb.getElementsByTagName("tr"); for(var i=0;i<tr.length;i++){ if(i%2==0){ tr[i].className="treven";//偶数行 } else{ tr[i].className="trodd";//奇数行 } tr[i].onmouseover=function(){ oldClassName=this.className;//把当前的样式名字赋值给oldClassName this.className="tractive";//再把"tractive"样式赋给this.className }; tr[i].onmouseout=function(){ this.className=oldClassName;//把之前储存的样式赋给this.className }; } } </script> </head> <body> <div> <select id="sel" onchange="document.getElementById('linkCSS').href=this.value"> <option value="css/green.css">绿色森林</option> <option value="css/blue.css">蓝色天空</option> <option value="css/red.css">红色海洋</option> </select> </div> <table class="tab"> <thead> <tr> <th>TH1</th> <th>TH2</th> <th>TH3</th> <th>TH4</th> <th>TH5</th> </tr> </thead> <tbody> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> <td>td4</td> <td>td5</td> </tr> </tbody> </table> </body> </html>
