博客列表 >classList对象及blur事件的学习

classList对象及blur事件的学习

阿杰
阿杰原创
2022年04月07日 17:07:19530浏览

一、classList对象

(1)初始标签内容级样式

  1. <style>
  2. .title{
  3. border: 1px solid #ccc;
  4. }
  5. </style>
  6. <div class="title" id="firstH">Hello World!</div>
  7. <script>
  8. const mydiv = document.querySelector('.title');
  9. </script>

(2)classList的添加事件

  1. <style>
  2. .title{
  3. border: 1px solid #ccc;
  4. }
  5. .active{
  6. color: red;
  7. }
  8. .bgc {
  9. background-color: yellow;
  10. }
  11. .em {
  12. color: blueviolet;
  13. }
  14. .bgc2 {
  15. background-color: lightgreen;
  16. }
  17. </style>
  18. <script>
  19. const mydiv = document.querySelector('.title');
  20. // classList的添加事件
  21. mydiv.classList.add('active');
  22. mydiv.classList.add('bgc');
  23. </script>

(3)classList的判断事件

  1. // classList的判断事件
  2. console.log(mydiv.classList.contains('title'));
  3. console.log(mydiv.classList.contains('secondH'));

(4)classList的移除事件

  1. console.log(mydiv.classList);
  2. // classList的移除事件
  3. mydiv.classList.remove('bgc');
  4. console.log(mydiv.classList);

(5)classList的替换事件

  1. // classList的替换事件
  2. mydiv.classList.replace('active','em');
  3. console.log(mydiv.classList);

(6)classList的动态切换事件

  1. // classList的动态切换事件
  2. mydiv.classList.toggle('bgc2');
  3. console.log(mydiv.classList);
  4. mydiv.classList.toggle('bgc2');
  5. console.log(mydiv.classList);

二、blur事件

  • html 部分
  1. <form action="" method="post" id="login">
  2. <label class="title">用户登录</label>
  3. <label for="email">邮箱:</label>
  4. <input type="email" id="email" name="email" value="" autofocus onblur="emails(event)" />
  5. <label for="password">密码:</label>
  6. <input type="password" id="password" name="password" onblur="passw(event)" />
  7. <button name="submit" onclick="check(this)">登录</button>
  8. </form>
  • js部分
  1. function emails(ele) {
  2. if (ele.target.value === '') {
  3. alert('邮箱不能为空');
  4. return false;
  5. }
  6. }
  7. function passw(ele) {
  8. if (ele.target.value === '') {
  9. alert('密码不能为空');
  10. return false;
  11. }
  12. }
  • 效果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议