classList对象

示例代码：

<style>
      .box {
        background-color: yellow;
        color: red;
      }
      .active {
        border: 1px solid #333;
      }
      .em {
        background-color: rgb(0, 238, 255);
        color: rgb(255, 0, 34);
      }
      .bgc {
        background-color: greenyellow;
      }
    </style>
  </head>
  <body>
    <div class="box">php中文网</div>
    <script>
      let box = document.querySelector(".box");
      console.log(box);
      //添加class
      box.classList.add("active");
      //判断是否有class
      console.log(box.classList.contains("box"));
      //替换class
      box.classList.replace("box", "em");
      //移除class
      box.classList.remove("em");
      //toggle  有去无加
      box.classList.toggle("bgc");
    </script>

blur事件进行表单非空验证

示例代码：

//焦点移除密码不能为空
      document.forms.login.password.onblur = function () {
        if (this.value.length === 0) {
          alert("密码不能为空");
          return false;
        }
      };

1. 实例演示classList对象 2. 使用blur事件进行表单非空验证

classList对象

示例代码：

blur事件进行表单非空验证

示例代码：