50-Js控制元素显示隐藏

发布时间:2024年01月16日
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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。