search

博客列表 >ClassList对象学习总结、表单事件非空验证

ClassList对象学习总结、表单事件非空验证

千里马遇伯乐
千里马遇伯乐原创
2022年04月07日 19:30:39571浏览

ClassList对象实践

1. 给出一个h2

HTML

  1.  <h2 class="title">测试</h2>

添加css样式

  1.  <style>
  2.                 .title {
  3.             background-color: green;
  4.             color: rgb(244, 246, 248);
  5.         }
  6.         .title1 {
  7.             background-color: rgb(18, 26, 150);
  8.         }
  9.         .title2{
  10.             color:chartreuse;
  11.         }
  12.         .title3 {
  13.             background-color: orange;
  14.             color:burlywood;
  15.         }
  16.     </style>

效果

为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

失去焦点时进行非空验证

  1.   <body>
  3.     <form action="" method="post" id="login">
  4.         <label class="title">用户登录</label>
  5.         <label for="email">邮箱:</label>
  6.         <input type="email" id="email" name="email"    value="" autofocus />
  7.         <label for="password">密码:</label>
  8.         <input type="password" id="password" name="password" />
  9.         <!-- 1. type="button" 这是一个普通按钮,没有提交行为 -->
  10.         <button name="submit" onclick="check(this)">登录</button>
  11.     </form>
  13.     <script>
  14.         function check(ele) {
  15.             // 禁用默认行为
  16.             event.preventDefault();
  17.             // 防止冒泡
  18.             event.stopPropagation();
  19.             // 非空验证
  20.             let email = ele.form.email;
  21.             let password = ele.form.password;
  22.             if (email.value.length === 0) {
  23.                 alert('邮箱不能为空');
  24.                 email.blur();
  25.                 return false;
  26.             } else if (password.value.length === 0) {
  27.                 alert('密码不能为空');
  28.                 password.blur();
  29.                 return false;
  30.             } else {
  31.                 alert('验证通过');
  32.             }
  33.         }
  34.           document.forms.login.email.onblur = function() {
  35.             if (this.value.length === 0) {
  36.                 alert('不能为空');
  37.                 return false;
  39.             }
  40.         }
  44.     </script>
  45. </body>

上一条：获取焦点提示以及失去焦点提示下一条：classList对象、blur事件进行表单非空验证
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多