JS:鼠标事件：实现鼠标移动到div背景颜色变换，移开还原

最新推荐文章于 2023-11-17 12:25:08 发布

低调之壮志凌云

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量1w

点赞数 2

分类专栏：前端文章标签： js html css html5

本文链接：https://blog.csdn.net/qq_41508763/article/details/109215557

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

提示：JS

onmouseover 事件

object.οnmοuseοver=function(){SomeJavaScriptCode}

js学习中的误区和错误

onmouseover:鼠标移到某元素之上

onmouseout:鼠标从某元素移开

思考：为什么不能用id选择器使用第一种方法，问题出在哪里？

第一种方法：class类选择器只能用类选择器，为什么不能用id选择器，为什么会报错οnmοuseοver=function()未定义？

<script type="text/javascript">
    window.onload=function (){
        let d1Obj= document.getElementsByClassName("d1")[0];<!--class方法正确   id选择器报错：未定义-->
        let d2Obj= document.getElementById("d2")[0];
        let d3Obj= document.getElementById("d3")[0];

        d1Obj.onmouseover=function(){
            document.bgColor="red";
        }

        d1Obj.onmouseout=function (){
            document.bgColor="white";
        }
    }

</script>

第二种方法：id选择器

id方法：id选择器，使用这种形式id选择器不报错

<script type="text/javascript">
    function over(){ 
        var x = document.getElementById("d1").innerHTML="鼠标不在上面的颜色";
        var x = document.getElementById("d1").style.color="pick";
        var x = document.getElementById("d1").style.backgroundColor="dodgerblue";
    }
    function out(){
        var x = document.getElementById("d1").innerHTML="鼠标在上面的颜色";
        var x = document.getElementById("d1").style.color="red";
        var x = document.getElementById("d1").style.backgroundColor="green";
    }
</script>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function (){
            let d1Obj= document.getElementsByClassName("d1")[0];<!--class方法 id选择器报错：未定义-->
            let d2Obj= document.getElementById("d2")[0];
            let d3Obj= document.getElementById("d3")[0];

            d1Obj.onmouseover=function(){
                document.bgColor="red";
            }

            d1Obj.onmouseout=function (){
                document.bgColor="white";
            }
        }

    </script>
    <!--<script type="text/javascript">
        function over(){ id方法
            var x = document.getElementById("d1").innerHTML="鼠标不在上面的颜色";
            var x = document.getElementById("d1").style.color="pick";
            var x = document.getElementById("d1").style.backgroundColor="dodgerblue";
        }
        function out(){
            var x = document.getElementById("d1").innerHTML="鼠标在上面的颜色";
            var x = document.getElementById("d1").style.color="red";
            var x = document.getElementById("d1").style.backgroundColor="green";
        }
    </script>-->
    <style type="text/css">
        .d1,#d2,#d3{
            width: 100px;
            height: 50px;
            float: left;
            margin-right: 4px;
        }
        .d1{
            background-color: blueviolet;
        }
        #d2{
            background-color: greenyellow;
        }
        #d3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <!--<div id="d1" onmouseover = "over()" onmouseout="out()"></div>-->
    <div class="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>