JS 控制div的可见和隐藏 display

最新推荐文章于 2025-03-10 04:25:41 发布

白沙王

最新推荐文章于 2025-03-10 04:25:41 发布

阅读量1.8k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131156662

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        
        #divShowId{
            position:absolute;
            width:100px;
            height:100px;
            background-color:aqua;
            color:white;
            display:none;
        }
    </style>
    <script>
        onload = function () {
            //获取所有按钮
            var input1 = this.document.getElementsByTagName('input');
            for (var i = 0; i < input1.length; i++) {
                //给每一个按钮绑定鼠标指向事件
                input1[i].onmouseover = function (e) {
                    //获取div
                    var div1 = document.getElementById('divShowId')
                    //将divd id值赋值给div1文本
                    div1.innerText = this.id;
                    //div可见
                    div1.style.display = 'block';
                    //div的x坐标
                    div1.style.left = e.clientX + 'px';
                    //div的y坐标
                    div1.style.top = e.clientY + 'px';
                    
                };
                //给每一个按钮绑定鼠标移开事件
                input1[i].onmouseout = function () {
                    //获取div
                    var div1 = document.getElementById('divShowId');
                    //隐藏div
                    div1.style.display = 'none';
                };
            }
        };
    </script>
</head>
<body>
    <!--鼠标移动到按钮的位置显示按钮的ID号码-->
    <input type="button" id="btn1"value="按钮1" />
    <input type="button" id="btn2"value="按钮2" />
    <input type="button" id="btn3"value="按钮3" />
    <input type="button" id="btn4"value="按钮4" />
    <input type="button" id="btn5"value="按钮5" />
    <div id="divShowId">

    </div>

</body>
</html>