js实现隔行变色操作鼠标经过效果
js实现隔行变色操作鼠标经过效果，下面是javascript代码<script type="text/javascript">/**隔行变色**/function changColor(){var table_Element = document.getElementById("table_style");var tr_Element = table_Element.rows;for(var i=0;i<tr_Element.length;i++){if(i%2==0){tr_Element.className = "tr_style_1";}else{tr_Element.className = "tr_style_2";}}}/**鼠标经过的效果**/function tr_color(){var table_Element = document.getElementById("table_style");var tr_Element = table_Element.rows;for(var i=0;i<tr_Element.length;i++){tr_Element.old_class = tr_Element.className; //先让这个类old_class属性记住它以前的样式tr_Element.onmousemove = function (){ this.className = "tr_style";}tr_Element.onmouseout = function (){this.className = this.old_class; //当鼠标移开之后还原以前的样式}}}/**当页面加载时执行**/window.onload = function (){changColor();tr_color();}</script>
下面是css代码<style type="text/css">/**隔行变色样式**/.tr_style_1 { background-color:#00FFCC;}.tr_style_2 { background-color:#FFFF00;}/**鼠标经过样式**/.tr_style { background-color:#00FF00; color:#FFFFFF;}</style>
下面是完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js实现隔行变色操作鼠标经过效果</title><style type="text/css">/**隔行变色样式**/.tr_style_1 { background-color:#00FFCC;}.tr_style_2 { background-color:#FFFF00;}/**鼠标经过样式**/.tr_style { background-color:#00FF00; color:#FFFFFF;}</style><script type="text/javascript">/**隔行变色**/function changColor(){var table_Element = document.getElementById("table_style");var tr_Element = table_Element.rows;for(var i=0;i<tr_Element.length;i++){if(i%2==0){tr_Element.className = "tr_style_1";}else{tr_Element.className = "tr_style_2";}}}/**鼠标经过的效果**/function tr_color(){var table_Element = document.getElementById("table_style");var tr_Element = table_Element.rows;for(var i=0;i<tr_Element.length;i++){tr_Element.old_class = tr_Element.className; //先让这个类old_class属性记住它以前的样式tr_Element.onmousemove = function (){ this.className = "tr_style";}tr_Element.onmouseout = function (){this.className = this.old_class; //当鼠标移开之后还原以前的样式}}}/**当页面加载时执行**/window.onload = function (){changColor();tr_color();}</script></head><body><table border="1" width="200" height="150" id="table_style" cellpadding="0" cellspacing="0"> <tr> <td>中国</td> <td>中国</td> <td>中国</td> </tr> <tr> <td>美国</td> <td>美国</td> <td>美国</td> </tr> <tr> <td>俄罗斯</td> <td>俄罗斯</td> <td>俄罗斯</td> </tr> <tr> <td>日本</td> <td>日本</td> <td>日本</td> </tr> <tr> <td>新加坡</td> <td>新加坡</td> <td>新加坡</td> </tr> </table></body></html>
页:
[1]