《DOM编程艺术》中CSS—DOM的总结（二）
前言：接上篇，本篇有两个内容：一个是Demo：当鼠标hover到表格的一行上时这行表格字体加粗。。。好了，废话少说，开始！！！
－－－－－－－－－－－－－－－－－－严肃的分割线－－－－－－－－－－－－－－－－－－
1.一个Demo
需求：创建一个表格，当鼠标hover到一行上时，改变这行中字体的样式，鼠标移走恢复原样。
（1）HTML部分
这是一个表格 When Where 9月9日 北京路25号人民广场 10月9日 南京路28号人民博物馆 11月9日 上海路20号人民艺术中心（2）CSS部分
要美观，还是稍微写点样式吧
table { margin: auto; border: 1px solid gray; margin-top: 30px;}caption { margin: auto; font-weight: bold;}th { border: 1px dotted gray; background-color: gainsboro;}th,td { width: 10em; padding: 0.5em;}（3）js代码部分
思路就是：获取到所有的tr，然后遍历tr，并对tr做CSS样式修改。
－首先判断浏览器支不支持getElementsByTag
－其次获取所有的tr标签
－然后遍历，取出每一个tr标签，添加onmouseover事件和onmouseout事件，后面用匿名函数执行样式更换操作。
function highlightRows(){ if(!document.getElementsByTagName){ return false; } var trlist = document.getElementsByTagName("tr"); for(var i = 0; i 当然要在文档加载完成后执行这个函数，所以老熟人addLoadEvent函数又再次出现。
function addLoadEvent(func){ //把现有的window.onload存入变量oldonload var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } }}最后在文档加载完成后，添加这个函数到addLoadEvent函数。
addLoadEvent(highlightRows);
2.完整源代码
老规矩了，上完整源代码，你可以复制到本地看看效果，have fun ～～～欢迎留言评论拍砖交流
exampl table { margin: auto; border: 1px solid gray; margin-top: 30px; } caption { margin: auto; font-weight: bold; } th { border: 1px dotted gray; background-color: gainsboro; } th, td { width: 10em; padding: 0.5em; } 这是一个表格 When Where 9月9日 北京路25号人民广场 10月9日 南京路28号人民博物馆 11月9日 上海路20号人民艺术中心 function highlightRows(){ if(!document.getElementsByTagName){ return false; } var trlist = document.getElementsByTagName("tr"); for(var i = 0; i 关键字：JavaScript, css
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
