我现在觉得用DOM操作CSS没什么大用处，CSS3已经够强大了。不过还是练习一下，多敲敲代码准没错的！
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/format.css" /> <script src="js/addLoadEvent.js"></script> <script src="js/stripeTables.js"></script> <script src="js/displayAbbreviations.js"></script> <script src="js/highlightRows.js"></script> </head> <body> <table> <caption>Itinerary</caption> <thead> <tr> <th>When</th> <th>Where</th> </tr> </thead> <tbody> <tr> <td>June 9th</td> <td>Portland, <abbr title="Oregon">OR</abbr></td> </tr> <tr> <td>June 10th</td> <td>Seattle, <abbr title="Washington">WA</abbr></td> </tr> <tr> <td>June 12th</td> <td>Sacramento, <abbr title="California">CA</abbr></td> </tr> </tbody> </table> </body> </html>
css：
body{ font-family: "Helvetica","Arial",sans-serif; background-color: #fff; color: #000; } table{ margin: auto; border: 1px solid #699; } caption{ margin: auto; padding: .2em; font-size: 1.2em; font-weight: bold; } th{ font-weight: normal; font-style: italic; text-align: left; border: 1px dotted #699; background-color: #9cc; color: #000; } th,td{ width: 10em; padding: .5em; } .odd{ background-color: #ffc; }
js：
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function displayAbbreviations() { if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; //获取所有缩略词 var abbreviations = document.getElementsByTagName("abbr"); if(abbreviations.length < 1) return false; //定义一个数组，以便以后存放缩略词和解释 var defs = new Array(); //遍历缩略词对象，获取缩略词和解释 for (i=0; i<abbreviations.length; i++){ var current_abbr = abbreviations[i]; if(current_abbr.childNodes.length < 1) continue; var definition = current_abbr.getAttribute("title"); var key = current_abbr.lastChild.nodeValue; //把缩略词和解释存入数组，缩略词key作为下标 defs[key] = definition; } //创建一个dl，以便以后放表格 var dlist = document.createElement("dl"); //遍历对象 for (key in defs){4 var definition = defs[key]; //创建标题，把缩略词添加到dt里面 var dtitle =document.createElement("dt"); var dtitle_text = document.createTextNode(key); dtitle.appendChild(dtitle_text); //创建描述，把解释添加到dd里面 var ddesc = document.createElement("dd"); var ddesc_text = document.createTextNode(definition); ddesc.appendChild(ddesc_text); //把dd dt添加到dl也就是dlist中 dlist.appendChild(dtitle); dlist.appendChild(ddesc); } if (dlist.childNodes.length < 1) return false; //创建一个h2标题 var header = document.createElement("h2"); var header_text = document.createTextNode("abbreviations"); header.appendChild(header_text); //把h2标题添加到页面 document.body.appendChild(header); //把dl添加到页面 document.body.appendChild(dlist); } addLoadEvent(displayAbbreviations); // document.body.appendChild(element)方法把元素添加到html文档最后 function highlightRows() { if (!document.getElementsByTagName) return false; var rows = document.getElementsByTagName("tr"); for (var i=0; i<rows.length; i++){ rows[i].onmouseover = function () { this.style.fontWeight = "bold"; } rows[i].onmouseout = function () { this.style.fontWeight = "normal"; } } } addLoadEvent(highlightRows); function stripeTables() { if (!document.getElementsByTagName) return false; var tables = document.getElementsByTagName("table"); var odd, rows; for (var i=0; i<tables.length; i++){ odd = false; rows = tables[i].getElementsByTagName("tr"); for (var j=0; j<rows.length; j++){ if (odd == true){ addClass(rows[j],"odd"); odd = false; } else { odd =true; } } } } function addClass(element,value) { if (!element.className){ element.className = value; }else { newClassName = element.className; newClassName += " "; newClassName += value; element.className = newClassName; } } addLoadEvent(stripeTables);