JS——鼠标移哪哪变色

来源：互联网发布：指纹识别算法排名编辑：程序博客网时间：2024/06/06 07:20

【前言】

最近学习JavaScript视频里面有很好小例子，为啥把这个小例子分享出来了呢，嘿嘿，就是觉得可能会用到！

【正文】

一、思路：

1、获取表格：

先用getElementById获得表格的id，再用getElementsByTagName获取表格中的所有行

2、循环：

用了一个for循环，加了两个鼠标事件（onmouseover[鼠标指针移到]和onmouseout[鼠标指针离开]），鼠标指针移到时就变成粉色，离开后回归原色

二、代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css" >        table {            cursor:pointer;/*设置光标为小手指*/        }                td {            width:50px;        }    </style>    <script type="text/javascript" >        onload = function () {            //获得表格            var tbl = document.getElementById("tbl");            //获得表格中的所有行            var rows = tbl.getElementsByTagName("tr");            for (var i = 0; i < rows.length; i++) {                //鼠标进来事件：把行变成粉色色                rows[i].onmouseover = function () {                    this.style.backgroundColor = "pink";                };                //鼠标离开事件：把行取消粉色                rows[i].onmouseout = function () {                    this.style.backgroundColor = "";                };            }        };    </script></head><body>    <input type="button" name="name" value="点击变色" />    <table border="1" id="tbl">        <tr>            <td>姓名</td><td>性别</td><td>年龄</td>        </tr>        <tr>            <td>李一</td><td>男</td><td>20</td>        </tr>        <tr>            <td>李二</td><td>女</td><td>21</td>        </tr>        <tr>            <td>李三</td><td>男</td><td>20</td>        </tr>        <tr>            <td>李四</td><td>男</td><td>22</td>        </tr>        <tr>            <td>李五</td><td>男</td><td>23</td>        </tr>    </table></body></html>

三、效果图

阅读全文

0 0