演示classList对象与使用blur进行非空验证

演示classList

1.classList.add()：用js加上class样式。

<style>
.active{
  color:red;
}
</style>
<h2 class="title" id="one">新手1314</h2>
<script>
const h2 = document.querySelector(".title");//找到h2
h2.classList.add("active");
</script>
结果：新手1314的字体变为红色。

2.classList.contains()：判断有无class样式。

<style>
.active{
 color:red;
}
</style>
<h2 class="title" id="one">新手1314</h2>
<script>
const h2 = document.querySelector(".title");
h2.classList.add("active");
console.log(h2.classList.contains("active"));
</script>
结果：true

3.classList.remove():移除class样式。

<style>
.active{
 color:red;
}
.backg{
 background-color: aquamarine;
}
</style>
<h2 class="title" id="one">新手1314</h2>
<script>
const h2 = document.querySelector(".title");
h2.classList.add("active");
h2.classList.add("backg");
h2.classList.remove("backg");
</script>
结果：h2的样式里只有active的样式，背景颜色被移除

4.classList.replace(“被替换样式”,”替换的样式”)。

<style>
.active{
  color:red;
}
.list{
  color:violet;
}
</style>
<h2 class="title" id="one">新手1314</h2>
<script>
const h2 = document.querySelector(".title");
h2.classList.add("active");
h2.classList.replace("active","list");
</script>
结果：新手1314的字体颜色由红色变为紫罗兰色。

5.classList.toggle():动态切换class（有样式的话去除样式，没样式的话添加样式）

<style>
.backg{
  background-color:aquamarine;
}
</style>
<h2 class="title" id="one">新手1314</h2>
<script>
const h2 = document.querySelector(".title");
h2.classList.toggle("backg");
</script>
结果：背景颜色变为青色。(如果前面多加h2.classList.add("backg");的话结果为去掉背景色。)

使用blur进行非空验证

js代码：

<script>
      document.forms.login.email.onblur = function () {
        if (this.value.length === 0) {
          alert("邮箱不能为空");
          return false;
        } else if (this.value.length !== 0 && password.value.length !== 0) {
          alert("验证通过");
        }
      };
      document.forms.login.password.onblur = function () {
        if (this.value.length === 0) {
          alert("密码不能为空");
          return false;
        } else if (this.value.length !== 0 && email.value.length !== 0) {
          alert("验证通过");
        }
      };
</script>