鼠标点击小练习

最新推荐文章于 2024-02-28 22:44:38 发布

我若成魔，佛赖我何，我就是程序狂魔

最新推荐文章于 2024-02-28 22:44:38 发布

阅读量1.5k

点赞数 1

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/wangmengsasa/article/details/125414997

版权

这篇博客通过实例介绍了如何使用HTML、CSS和JavaScript实现鼠标点击的交互效果。HTML部分创建了基本的页面结构，CSS用于美化元素，而JavaScript则实现了点击事件的响应，增强了用户体验。

摘要由CSDN通过智能技术生成

HTML代码


     <div>

     </div>
     <button>点击添加文本</button>

CSS代码

   <style>
        div{
            width: 600px;
            height: 400px;
            border: 1px solid gray;
            margin: 60px auto;
        }
        button{
            display: block;
            margin: 20px auto;
        }
       
        .hover{
            color: white;
            width: 160px;
            height: 60px;
            margin: 60px auto;
            background: pink;
            text-align: center;
            line-height: 60px;
        }

    </style>

JS代码

 <script>

    //封装函数
      function wb(){
         //获取元素
         let div=document.querySelector('div');
         let btn=document.querySelector('button');
          //给btn绑定点击事件
          btn.onclick=functi