演示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>