• 技术文章 >web前端 >js教程

    JavaScript怎样实现点击出现效果

    长期闲置长期闲置2021-12-28 18:28:50原创230

    实现方法:1、给按钮绑定点击事件并指定一个事件处理函数;2、在事件处理函数中利用“document.getElementById(出现元素对象).style.display="block";”语句设置点击按钮元素显示即可。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    JavaScript怎样实现点击出现效果

    先创建一个按钮并且给按钮绑定事件处理函数,在事件处理函数中可以实现元素显示效果。

    示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
       <style>
       div{
           width:200px;
           height:200px;
           background:red;
           display:none;
       }
       </style>
    </head>
    <body>
       <button onclick="showimg()">显示图片</button>
       <div id="test"></div>
       <script>
       function showimg(){
          document.getElementById('test').style.display="block";
       }
       </script>
    </body>
    </html>

    输出结果:

    +1.gif

    【相关推荐:javascript学习教程

    以上就是JavaScript怎样实现点击出现效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 前端 html
    上一篇:手把手教你在 Node.js 服务中写日志 下一篇:JavaScript中wrap的意思是什么
    PHP编程就业班

    相关文章推荐

    • 你必须了解JavaScript箭头函数与剩余参数• 十分钟搞懂什么是JavaScript生成器(整理分享)• 十分钟搞懂什么是JavaScript迭代器• JavaScript事件之事件冒泡与时间捕获(总结分享)• 带你聊聊JavaScript中的回调函数,区分下同步和异步回调

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网