本文介绍: 4.一个按钮:显示—>(变成)隐藏,并实现相应的效果。1.使用style样式,两个按钮:显示按钮,隐藏按钮。2.style样式,一个按钮:显示/隐藏。3.利用开关实现显示或者隐藏。
1.使用style样式,两个按钮:显示按钮,隐藏按钮
    <style>
      div{
        width: 300px;
        height: 300px;
        background-color: red;
        transition: .4s;
      }
    </style>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <div></div>

    <script>
      var btn = document.getElementsByTagName("button");
      var div = document.getElementsByTagName("div")[0];  //不加0是伪数组
      //显示
      btn[0].onclick = function(){
        // div.style.display="block";
        div.style.opacity=1;
      }
      //隐藏
      btn[1].onclick = function(){
        // div.style.display="none";
        div.style.opacity=0;
      }
    </script>
  </body>

2.style样式,一个按钮:显示/隐藏

    <style>

原文地址:https://blog.csdn.net/qq_47462646/article/details/135632601

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_59928.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注