操作元素总结及作业1-黑马世纪佳缘 HTML+CSS+JS

小鱼&爱吃糖

已于 2023-08-11 10:35:59 修改

阅读量99

点赞数

分类专栏：前端文章标签： css javascript html

于 2023-08-11 10:25:15 首次发布

本文链接：https://blog.csdn.net/YY_DS_ysj/article/details/132225628

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        .box {
            margin: 20px auto;
            width: 400px;
            display: flex;
            justify-content: space-around;
        }
        input {
            color: #999;
            outline: none;
            border: 1px solid #ccc;
        }
        .sub {
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" value="邮箱/ID/手机号" class="ipt">
        <input type="text" value="密码" class="pwd">
        <input type="submit" value="登录" class="sub">
    </div>
    <script>
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var pwd = document.querySelector('.pwd');
        // 2.注册事件 获取焦点
        ipt.onfocus = function() {
            if (ipt.value === "邮箱/ID/手机号") {
                this.value = '';
            }
            this.style.color = '#333';
            this.style.borderColor = 'pink'
        }
        ipt.onblur = function() {
            if (ipt.value === "") {
                this.value = '邮箱/ID/手机号';
            }
            this.style.color = '#999';
            this.style.borderColor = '#ccc'
        }
        pwd.onfocus = function() {
            if (pwd.value === '密码') {
                this.value = '';
                this.type = 'password';
            }
            this.style.color = '#333';
            this.style.borderColor = 'pink'
        }
        pwd.onblur = function() {
            if (pwd.value === "") {
                this.value = '密码';
                this.type = 'text';
            }
            this.style.color = '#999';
        }
    </script>
</body>
</html>