ClassList对象学习心得与表单事件非空校验技巧

ClassList对象实践

1. 给出一个h2

HTML

1. class="title">测试

添加css样式

效果

为h2添加一个叫‘title1’的类名从而改变它的样式后效果

1. const h2=document.querySelector('.title')
2. // classlist.add()添加类名
3. h2.classList.add('title1');

判断h2是否包含其他类名

1. // clsslist.contains():判断是是否包含
2. console.log(h2.classList.contains('title1'));//显示true
3. console.log(h2.classList.contains('title3'));//显示false

删除类名

1. // classlist.remove()删除类名
2. h2.classList.remove('title');
3. console.log(h2.classList.contains('title'));

替换类名

1. // classlist.replace()替换类名
2. h2.classList.replace('title1','title');
3. console.log(h2.classList.contains('title'));
4. console.log(h2.classList.contains('title1'));

动态添加类名

1. // classlist.toggle()动态切换css
2. // 如果之前没有这个样式，就自动添加，如果有，则去掉这个样式
3. console.log(h2.classList.contains('title'));//显示true
4. h2.classList.toggle('title');
5. console.log(h2.classList.contains('title'));//显示false
6. console.log(h2.classList.contains('title3'));//显示false
7. h2.classList.toggle('title3');
8. console.log(h2.classList.contains('title3'));//显示true

失去焦点时进行非空验证

3. action="" method="post" id="login">
4. class="title">用户登录
5. for="email">邮箱:
6. type="email" id="email" name="email" value="" autofocus />
7. for="password">密码:
8. type="password" id="password" name="password" />
10. name="submit" onclick="check(this)">登录