classList 和事件

预览地址事件效果

classList使用

 <title>JS操作class</title>
<div>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>
<style>
    .list {
        background-color: cornsilk;
        height: 300px;
    }
    .ulwidth{
        width: 500px;
    }
    li {
        color: red
    }
</style>
<script>
    //行内样式使用xxx.style.xxx进行操作
    // 内部样式，外联样式使用 window.getComputedStyle()操作
    //例如：增加ul边框，
    let ul = document.querySelector('.list');//先获取ul
    ul.style.border = '1px solid';//对行内样式经行更改
    console.log(ul.style.border);//输出 1px solid
    console.log(ul.style.height);//height属性 在内联样式，没有输出结果，获取失败
    console.log(window.getComputedStyle(ul).height);//输出 高度300px
    //给高度增加100，先要将字符串转换成数字，使用paresInt()转换，然后赋值
    let height1 = parseInt(window.getComputedStyle(ul).height);
    height1 = height1 + 100;
    console.log(height1);
    ul.style.height = (height1 + 'px');
    console.log(window.getComputedStyle(ul).height);//输出 高度400px,修改成功
    let li = document.querySelector('li');//先获取li
    console.log(li.style.color);//color属性在内联样式，没有输出结果，获取失败
    // 内部样式，外联样式使用 window.getComputedStyle()获取值
    console.log(window.getComputedStyle(li).color);//输出 rgb(255,0,0)
    //使用classList操作属性对象
   //例如 给ul添加宽度属性
   ul.classList.add('ulwidth');
    ul.classList.add('list');
    console.log(window.getComputedStyle(ul).width);//输出500px添加成功
    //移除 classList.remove
    //替换 classList.replace('旧属性'，'新属性')
    //切换 没有就添加，有就删除 classList.toggle()
</script>

第二部分事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<form action="" method="get" name="login">
  <label for="name">账号</label>
  <input type="text" name="name" id="name" placeholder="请输入账号" autofocus>
    <div class="tishi">请输入账号</div>
    <div></div>
  <label for="pwd">密码</label>
  <input type="password" name="pwd" id="pwd" placeholder="请输入账号" >
</form>
<script>
  let form = document.forms.login;
  let account= form.elements.name;
  //account = 'admin';
  console.log(account.value)
  let pwd= form.elements.pwd
 // pwd.focus()
  console.log(pwd)
  //失去焦点的处理
  account.onblur=function () {
  let tishi = document.querySelector('.tishi')
      if (account.value.length===0){
          tishi.style.display='block'
            account.focus()
      }else{
          tishi.style.display='none'
      }
  }
</script>
<style>
    .tishi{
        display: none;
    }
</style>
</body>
</html>

classList 和 事件

classList 和 事件

预览地址事件效果

classList使用

第二部分 事件

classList 和事件

classList 和事件

第二部分事件