ClassList对象实践

1. 给出一个h2

<h2 class="title">测试专用</h2>

2. 添加几个css样式

<style>
        .title {
            background-color: green;
            color: black;
        }
        .title1 {
            background-color: red;
        }
        .title2{
            color:chartreuse;
        }
        .title3 {
            background-color: orange;
            color:burlywood;
        }
    </style>

效果：

3. 看我操作

为h2添加一个叫‘title1’的类名从而改变它的样式

      // 获取h2
      const h2 = document.querySelector('.title');
      // classlist.add()添加类名
      h2.classList.add('title1');

效果：

判断h2是否包含其他类名

    // clsslist.contains():判断是是否包含
console.log(h2.classList.contains('title1'));//显示true
console.log(h2.classList.contains('title3'));//显示false

效果：

删除类名

// classlist.remove()删除类名
      h2.classList.remove('title');
      console.log(h2.classList.contains('title'));

效果：

替换类名

// classlist.replace()替换类名
h2.classList.replace('title1','title');
      console.log(h2.classList.contains('title'));
      console.log(h2.classList.contains('title1'));

效果：

动态添加类名

// classlist.toggle()动态切换css
      // 如果之前没有这个样式，就自动添加，如果有，则去掉这个样式
      console.log(h2.classList.contains('title'));//显示true
      h2.classList.toggle('title');
      console.log(h2.classList.contains('title'));//显示false
      console.log(h2.classList.contains('title3'));//显示false
      h2.classList.toggle('title3');
      console.log(h2.classList.contains('title3'));//显示true

效果：

表单事件

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="" method="post" id="login">
        <label class="title">用户登录</label>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" value="" autofocus />
        <label for="">密码:</label>
        <input type="password" id="password" name="password" />
        <button class="submit" onclick="check(this)">登录</button>
    </form>
    <script>
        function check(ele){
            // 禁用默认行为
            event.preventDefault();
            // 防止冒泡
            event.stopPropagation();
            // 非空验证
            // 通过id和name拿到元素
            let email = ele.form.email;
            let password =ele.form.password;
            if (email.value.length === 0){
                alert('邮箱不能为空');
                email.focus();
                return false;
            }else if (password.value.length === 0) {
                alert('密码不能为空');
                email.focus();
                return false;
            }
            else {
                alert('验证通过');
            }   
        }
        document.forms.login.email.onblur=function(){
            if (this.value.length === 0){
                alert('邮箱不能为空');
                return false;
                this.focus();
            }
        }
        document.forms.login.password.onblur=function(){
            if (this.value.length === 0){
                alert('密码不能为空');
                return false;
                this.focus();
        }
    }
    </script>
</body>
</html>

css

body {
    background-color:mediumaquamarine;
    color: #444;
    font-weight: lighter;
}
#login {
    width: 20em;
    border-radius: 0.3em;
    box-shadow: 0 0 1em #888;
    box-sizing: border-box;
    padding: 1em 2em 1em;
    margin: 5em auto;
    background-color:paleturquoise;
    display: grid;
    grid-template-columns: 3em 1fr;
    gap:1em 0;
}
#login .title{
    grid-area:auto / span 2 ;
    place-self: center;
}
#login input {
    border-radius: 0.3em;
    border: none;
    padding-left: 0.3em;
}
#login input:focus {
    outline: none;
    box-shadow:  0 0 5px seagreen;
    background-color: hsl(283,100%,95%);
    /* hsl 色相、饱和度、亮度 */
    border-radius:  0.2 em;
    transition:  0.5s;
}
#login button{
    grid-area: auto / 2 / auto;
    outline: none;
    background-color: lightseagreen;
    border: none;
    height: 2em;
    color:#fff;
}
#login button:hover{
    cursor: pointer;
    background-color: seagreen;
    transition: 0.5s;
}

ClassList对象学习总结、表单事件实践

ClassList对象实践

1. 给出一个h2

2. 添加几个css样式

效果：

3. 看我操作

为h2添加一个叫‘title1’的类名从而改变它的样式

效果：

判断h2是否包含其他类名

效果：

删除类名

效果：

替换类名

效果：

动态添加类名

效果：

表单事件

效果：