元素消失案例

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0

元素不展示案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .box {
        position: relative;
        width: 74px;
        height: 88px;
        border: 1px solid #ccc;
        margin: 100px auto;
        font-size: 12px;
        text-align: center;
        color: #f40;
        /* display: block; */
      }

      .box img {
        width: 60px;
        margin-top: 5px;
      }

      .close-btn {
        position: absolute;
        top: -1px;
        left: -16px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="box">
      淘宝二维码
      <img src="images/tao.png" alt="" />
      <i class="close-btn">×</i>
    </div>

    <script>
      // 1. 获取元素
      var btn = document.querySelector(".close-btn");
      var box = document.querySelector(".box");

      // 2.注册事件 程序处理
      btn.onclick = function () {
        box.style.display = "none";
      };
    </script>
  </body>
</html>
Prev: 修改样式属性 Next: 循环精灵图