JavaScript鼠标移动变色

最新推荐文章于 2023-08-26 11:05:53 发布

原创最新推荐文章于 2023-08-26 11:05:53 发布 · 713 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了使用JavaScript实现鼠标移动时表格行颜色变化的两种方法，通过遍历表格行并应用不同的变色逻辑。

部署运行你感兴趣的模型镜像

鼠标移动变色

 var trs = document.getElementsByTagName("tr");
         //遍历所有tr，给所有tr绑定事件
         for (var i = 0; i < trs.length; i++) {
             trs[i].onmouseover = function () {
                 this.style.backgroundColor = "gray";
             }
             trs[i].onmouseout = function () {
                 this.style.backgroundColor = "white";
             }
         }

上下两种原理一样，都是遍历所有tr，只是变色的方式有点不同
这是一条分割线--------------------------------------------------------------------------------------------------------------------------------------

<style>
        .out{
            background-color: white;
        }
        .over{
            background-color: gray;
        }
</style>

<script>
         var trs = document.getElementsByTagName("tr");
         //遍历所有tr，给所有tr绑定事件
         for (var i = 0; i < trs.length; i++) {
             trs[i].onmouseover = function () {
                 this.className = "over";
             }
             trs[i].onmouseout = function () {
                 this.className = "out";
             }
         }
 </script>