ASCII码 ASCII码

classList 和 事件

发布于：2022-06-08 08:55:40  栏目：技术文档

classList 和 事件

预览地址事件效果

classList使用

  1.  <title>JS操作class</title>
  3. <div>
  4.     <ul class="list">
  5.         <li>item1</li>
  6.         <li>item2</li>
  7.         <li>item3</li>
  8.     </ul>
  9. </div>
  10. <style>
  11.     .list {
  12.         background-color: cornsilk;
  13.         height: 300px;
  14.     }
  15.     .ulwidth{
  16.         width: 500px;
  18.     }
  19.     li {
  20.         color: red
  21.     }
  22. </style>
  23. <script>
  24.     //行内样式使用xxx.style.xxx进行操作
  25.     // 内部样式，外联样式使用 window.getComputedStyle()操作
  26.     //例如：增加ul边框，
  27.     let ul = document.querySelector('.list');//先获取ul
  28.     ul.style.border = '1px solid';//对行内样式经行更改
  29.     console.log(ul.style.border);//输出 1px solid
  30.     console.log(ul.style.height);//height属性 在内联样式，没有输出结果，获取失败
  31.     console.log(window.getComputedStyle(ul).height);//输出 高度300px
  32.     //给高度增加100，先要将字符串转换成数字，使用paresInt()转换，然后赋值
  33.     let height1 = parseInt(window.getComputedStyle(ul).height);
  34.     height1 = height1 + 100;
  35.     console.log(height1);
  36.     ul.style.height = (height1 + 'px');
  37.     console.log(window.getComputedStyle(ul).height);//输出 高度400px,修改成功
  40.     let li = document.querySelector('li');//先获取li
  41.     console.log(li.style.color);//color属性在内联样式，没有输出结果，获取失败
  43.     // 内部样式，外联样式使用 window.getComputedStyle()获取值
  44.     console.log(window.getComputedStyle(li).color);//输出 rgb(255,0,0)
  47.     //使用classList操作属性对象
  48.    //例如 给ul添加宽度属性
  49.    ul.classList.add('ulwidth');
  50.     ul.classList.add('list');
  51.     console.log(window.getComputedStyle(ul).width);//输出500px添加成功
  53.     //移除 classList.remove
  54.     //替换 classList.replace('旧属性'，'新属性')
  55.     //切换 没有就添加，有就删除 classList.toggle()
  56. </script>

第二部分 事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件</title>
  6. </head>
  7. <body>
  8. <form action="" method="get" name="login">
  9.   <label for="name">账号</label>
  10.   <input type="text" name="name" id="name" placeholder="请输入账号" autofocus>
  12.     <div class="tishi">请输入账号</div>
  13.     <div></div>
  14.   <label for="pwd">密码</label>
  15.   <input type="password" name="pwd" id="pwd" placeholder="请输入账号" >
  16. </form>
  18. <script>
  19.   let form = document.forms.login;
  20.   let account= form.elements.name;
  21.   //account = 'admin';
  22.   console.log(account.value)
  23.   let pwd= form.elements.pwd
  24.  // pwd.focus()
  25.   console.log(pwd)
  26.   //失去焦点的处理
  27.   account.onblur=function () {
  28.   let tishi = document.querySelector('.tishi')
  29.       if (account.value.length===0){
  31.           tishi.style.display='block'
  32.             account.focus()
  33.       }else{
  34.           tishi.style.display='none'
  35.       }
  37.   }
  38. </script>
  40. <style>
  41.     .tishi{
  42.         display: none;
  43.     }
  44. </style>
  45. </body>
  46. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行