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>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Markdown入门

2022-05-07 18:59:11

classList 和 事件

预览地址事件效果

classList使用

第二部分 事件

classList 和事件

第二部分事件