JavaScript鼠标移动变色

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

PPAP__

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

阅读量696

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/PPAP__/article/details/107389719

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标移动变色

 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>